如何使用geojson點特征上的數據setStyle調整自定義svg標記的大小

Question

這應該很簡單，但是我無法弄清楚為什么在設置圖標的寬度和高度時自定義標記會消失。

嘗試調整大小之前，svg圖標在地圖上看起來不錯... https://jsfiddle.net/joshmoto/pzhjc6d7

但是，當我通過map.data.setStyle圖標數組添加大小調整參數時，我的標記消失了。

 var geoJson_features = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "id": 70, "name": "roman coin" }, "geometry": { "type": "Point", "coordinates": [ -0.7318782806396484375, 51.8924376272136740340 ] } }] }; function initialize() { // map properties var mapProp = { zoom: 17, zoomControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, 'night_hawk_style' ], style: google.maps.MapTypeControlStyle.HORIZONTAL, position: google.maps.ControlPosition.BOTTOM_RIGHT, backgroundColor: 'none' } }; // google map object var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); // load GeoJSON. google.maps.event.addListenerOnce(map, 'idle', function() { // load GeoJSON. map.data.addGeoJson(geoJson_features); // create empty bounds object var bounds = new google.maps.LatLngBounds(); // loop through features map.data.forEach(function(feature) { // get the features geometry var geo = feature.getGeometry(); // loop through each coordinate geo.forEachLatLng(function(LatLng) { bounds.extend(LatLng); }); }); // fit data to bounds map.fitBounds(bounds); }); // map data styles based on geo json properties map.data.setStyle(function(feature) { // statusColor var statusColor = 'transparent'; // check feature property status if (feature.getProperty('status')) { statusColor = feature.getProperty('status'); } // return the style for the feature return ({ icon: { // set svg icon svg url: 'https://svgshare.com/i/8tN.svg', // this marker is 14 pixels wide by 12 pixels high. //size: new google.maps.Size(14, 12), // the origin for this image is (0, 0). //origin: new google.maps.Point(0, 0), // The anchor for this image is the base (0, 12). //anchor: new google.maps.Point(0, 12) } }); }); } google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <div id="googleMap"></div> <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 

一旦開始在下面添加這些參數，我的自定義標記就會消失。 並且控制台中沒有錯誤。

return ({
  icon: {

    // set svg icon svg
    url: 'https://svgshare.com/i/8tN.svg',

    // this marker is 14 pixels wide by 12 pixels high.
    size: new google.maps.Size(14, 12),

    // the origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),

    // The anchor for this image is the base (0, 12).
    anchor: new google.maps.Point(0, 12)

  }
});

任何人都可以幫助您了解這里出了什么問題。 謝謝

Answer 1

要縮放該圖標，請將其scaledSize設置為所需的大小（以及您想要的anchor ，底座中間對我來說有點奇怪，但這就是您想要的，請使用Size(7,12)如下） ：

map.data.setStyle(function(feature) {
  // statusColor
  var statusColor = 'transparent';
  // check feature property status
  if (feature.getProperty('status')) {
    statusColor = feature.getProperty('status');
  }
  // return the style for the feature
  return ({
    icon: {
      // set svg icon svg
      url: 'https://svgshare.com/i/8tN.svg',
      // this marker is 765.9 pixels wide by 666 pixels high.
      scaledSize: new google.maps.Size(14, 12),
      // The anchor for this image is the base (0, 12).
      anchor: new google.maps.Point(7, 12)
    }
  });
});

小提琴

代碼段：

 function initialize() { // map properties var mapProp = { zoom: 17, zoomControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, 'night_hawk_style' ], style: google.maps.MapTypeControlStyle.HORIZONTAL, position: google.maps.ControlPosition.BOTTOM_RIGHT, backgroundColor: 'none' } }; // google map object var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); var measle = new google.maps.Marker({ position: { lng: -0.7318782806396484375, lat: 51.8924376272136740340 }, map: map, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) } }); // load GeoJSON. google.maps.event.addListenerOnce(map, 'idle', function() { // load GeoJSON. map.data.addGeoJson(geoJson_features); // create empty bounds object var bounds = new google.maps.LatLngBounds(); // loop through features map.data.forEach(function(feature) { // get the features geometry var geo = feature.getGeometry(); // loop through each coordinate geo.forEachLatLng(function(LatLng) { bounds.extend(LatLng); }); }); // fit data to bounds map.fitBounds(bounds); }); // map data styles based on geo json properties map.data.setStyle(function(feature) { // statusColor var statusColor = 'transparent'; // check feature property status if (feature.getProperty('status')) { statusColor = feature.getProperty('status'); } // return the style for the feature return ({ icon: { // set svg icon svg url: 'https://svgshare.com/i/8tN.svg', // this marker is 765.9 pixels wide by 666 pixels high. scaledSize: new google.maps.Size(14, 12), // The anchor for this image is the base (0, 12). anchor: new google.maps.Point(7, 12) } }); }); } google.maps.event.addDomListener(window, "load", initialize); var geoJson_features = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "id": 70, "name": "roman coin" }, "geometry": { "type": "Point", "coordinates": [-0.7318782806396484375, 51.8924376272136740340 ] } }] }; 

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <div id="googleMap"></div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> 

Answer 2

您不必在初始化函數中返回圖標，您應該將圖標設置為具有新屬性的新對象。

const icon = {

    // set svg icon svg
    url: 'https://svgshare.com/i/8tN.svg',

    // this marker is 14 pixels wide by 12 pixels high.
    size: new google.maps.Size(14, 12),

    // the origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),

    // The anchor for this image is the base (0, 12).
    anchor: new google.maps.Point(0, 12)

  }
      marker = new google.maps.Marker({
        position: feature.position,
        icon: icon,
        map: map
      });