通过 geojson 属性更改谷歌地图标记图标答案

【问题标题】：Changing Google Maps marker icons through geojson properties通过 geojson 属性更改谷歌地图标记图标
【发布时间】：2017-04-29 05:52:04
【问题描述】：

我必须在 Google 地图中绘制标记，使用这样的 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 图标属性中指定的图标绘制每个标记，我需要纠正什么？

【问题讨论】：

应该是icon: data.properties.icon 而不是icon: data.feature.getProperty("icon")

标签： javascript google-maps google-maps-api-3

【解决方案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, 回调？：函数（数组））

【讨论】：