google maps loadGeoJson 在点击时更改标记图标

Question

我正在使用 loadGeoJson 从 json 文件加载标记。

我可以在加载时设置标记 icon/img，但我不知道如何在单击时更改它。

如何定位点击的标记并执行 setIcon 或类似操作？

javascript:

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(2.8,-187.3),
      mapTypeId: 'terrain'
    });

    map.data.loadGeoJson('geoJson2.json'); 

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

    map.data.addListener("click", event => {
      console.log(event.feature.getProperty("hicon"));
        //CHANGE MARKER ICON -> event.feature.getProperty("hicon")

    });
  }

json:

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "name":"nameOne",
            "icon":"marker1.png",
            "hicon":"marker1HOVER.png",
            "id":1
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               -59.58984374999999,
               -37.97884504049711
            ]
         }
      }
   ]
}

Answer 1

请参阅文档中的 example of dynamic styling。

  map.data.setStyle(function(feature) {
    var icon=feature.getProperty('icon');
    if (feature.getProperty("isHighlighted"))
      icon=feature.getProperty('hicon');
    return {
      icon: icon
    };
  });

  map.data.addListener("click", event => {
    if (!event.feature.getProperty("isHighlighted"))
      event.feature.setProperty("isHighlighted", true);
    else 
      event.feature.setProperty("isHighlighted", false);
    console.log(event.feature.getProperty("hicon"));
    //CHANGE MARKER ICON -> event.feature.getProperty("hicon")

  });

proof of concept fiddle

代码片段：

"use strict";

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: new google.maps.LatLng(-37.9788, -59.58984375),
    mapTypeId: 'terrain'
  });

  map.data.addGeoJson(geoJson);

  map.data.setStyle(function(feature) {
    var icon = feature.getProperty('icon');
    if (feature.getProperty("isHighlighted"))
      icon = feature.getProperty('hicon');
    return {
      icon: icon
    };
  });

  map.data.addListener("click", event => {
    if (!event.feature.getProperty("isHighlighted"))
      event.feature.setProperty("isHighlighted", true);
    else
      event.feature.setProperty("isHighlighted", false);
    console.log(event.feature.getProperty("hicon"));
    //CHANGE MARKER ICON -> event.feature.getProperty("hicon")

  });
}
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "nameOne",
      "icon": "https://maps.google.com/mapfiles/ms/micons/blue.png",
      "hicon": "https://maps.google.com/mapfiles/ms/micons/yellow.png",
      "id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-59.58984374999999, -37.97884504049711]
    }
  }]
};

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Data Layer: Styling</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

google maps loadGeoJson 在点击时更改标记图标

google maps loadGeoJson change marker icon on click

javascript

icons

google-maps

click

google-maps-api-3