javascript - 通过 geojson 属性更改 Google map 标记图标

Question

我必须在 Google map 中绘制标记，使用这样的 geojson 文件:

{"type": "FeatureCollection", "features": [{"geometry": {"type": "Point", 
"coordinates": [-77.76242552657358, -10.749107039737899]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.76242552657358, -10.749107039737899]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.7623641788643, -10.7500605616405]}, "type": 
"Feature", "properties": {"icon": "chart_green.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.77211472346339, -10.728081474512]}, "type": 
"Feature", "properties": {"icon": "chart_green.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.7614956126977, -10.750647917225699]}, "type": 
"Feature", "properties": {"icon": "chart_green.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.76185649510131, -10.7516817240557]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.76185649510131, -10.7516817240557]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.76242552657358, -10.749107039737899]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.7469388021172, -10.7729040573081]}, "type": 
"Feature", "properties": {"icon": "chart_green.png"}}]}

其中每个标记都由具有点几何的特征表示，并具有一个名为“图标”的属性，该属性指向同一域中的标记图像。使用以下 javascript 代码，我能够绘制标记，但它们都具有默认的红色标记图像。

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {lat: -12, lng: -77},
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var histPlacesCoordinates = map.data.loadGeoJson('hist1.geojson');
    for (var i = 0, length = histPlacesCoordinates.features.length; i < length; i++) {
      var data = histPlacesCoordinates.features[i],
        latLng = new google.maps.LatLng(data.geometry.coordinates[1], data.geometry.coordinates[0]);

      var histPlaces = new google.maps.Marker();
      histPlaces.setStyle({
          position: latLng, 
          map: map,
          icon: data.feature.getProperty("icon")
        });
    }
  }

要让每个标记都使用 geojson 图标属性中指定的图标进行绘制，我需要更正什么？

Answer 1

我让它在这里工作..请参阅 fiddle

 function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: -12,
      lng: -77
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var markerCollection = map.data.addGeoJson(geoJson);
  for (var i = 0, length = markerCollection.length; i < length; i++) {
    var feature = markerCollection[i];
    debugger;
    if (feature.getProperty('icon')) {
      map.data.setStyle(function(feature) {
        return {
          icon: feature.getProperty('icon')
        };
      });
    }
  }
}

因为我从一个变量加载 geoJson，所以我使用了 addGeoJson 方法。该方法将返回特征集合。因此，我们将对其进行迭代并为每个功能添加样式。

  map.data.setStyle(function(feature) {
    return {
      icon: feature.getProperty('icon')
    };
  });

另请注意，loadGeoJson 返回值为 null。见this回答。因此您的变量 histPlacesCoordinates 将未定义或为空。

如果您打算使用 loadGeoJson，那么您将在回调中获得 featureCollection。您也可以通过迭代该数组在该回调中设置图标。

loadGeoJson(url:string, options?:Data.GeoJsonOptions, callback?:function(Array))