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)
    }
  });
});

fiddle

代码段：

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"></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
      });

如何使用geojson点特征上的数据setStyle调整自定义svg标记的大小

2 个答案: