google maps loadGeo Json изменить значок маркера при нажатии - PullRequest
Новая
       108

google maps loadGeo Json изменить значок маркера при нажатии

0 голосов
/ 05 августа 2020

Я загружаю маркеры из файла json с помощью loadGeo Json.

Я могу УСТАНОВИТЬ значок маркера / 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
            ]
         }
      }
   ]
}

1 Ответ

0 голосов
/ 05 августа 2020

См. пример Dynami c стиль в документации. 

  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")

  });

доказательство концепции скрипта

фрагмент кода: 

"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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...