Маркеры печати с использованием LoadGeoJson не включают подсказки при наведении курсора - PullRequest
Новая
       20

Маркеры печати с использованием LoadGeoJson не включают подсказки при наведении курсора

0 голосов
/ 09 марта 2019

Я пытаюсь нанести точки на карту Google с помощью GeoJSON. Точки строятся, но текстовая подсказка не отображается при наведении курсора мыши на загруженный маркер. Как ни странно, созданный вручную маркер работает нормально. Что я делаю не так? 

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

  function initMap() {
    var image = 'http://maps.google.com/mapfiles/kml/pal2/icon23.png';

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(0,0),
    });

    map.data.setStyle({
        icon: image,
    });

    map.data.addListener('mouseover', function(evt) {
        if (evt.feature.getGeometry().getType() == "Point") {
            var labelText = evt.feature.getProperty("text");
            this.setOptions({ text: labelText });
        }
    });

    map.data.loadGeoJson('http://teste2.farmi.pro.br/media/uploads/geo.json');

    var marker = new google.maps.Marker({
      position: {lat: -25.363, lng: 131.044},
      map: map,
      icon: image,
      title: 'Austrália: 3 artigos'
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqF_oBglS9wsnPTBEjIdFUgzjCl_whQHs&callback=initMap">
</script>

Попытка здесь жива: http://teste2.farmi.pro.br/media/uploads/exemplo.html

GeoJSON: 

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "name": "Austrália: 3 eventos" },
      "geometry": { "type": "Point", "coordinates": [123.61, -22.14] }
    }
  ]
}

1 Ответ

1 голос
/ 11 марта 2019

Вам необходимо создать функцию стиля для DataLayer, которая устанавливает свойство title для иконки (текст при наведении курсора) . 

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

подтверждение концепции скрипки

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

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<div id="map"></div>
<script>
  function initMap() {
    var image = 'http://maps.google.com/mapfiles/kml/pal2/icon23.png';

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(-25.274398, 133.775136),
    });

    map.data.setStyle(function(feature) {
      console.log(feature.getProperty('name'));
      return {
        icon: image,
        title: feature.getProperty('name')
      };
    });
    map.data.addGeoJson(geoJson);
  }
  var geoJson = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "properties": {
        "name": "Austrália: 3 eventos"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [123.61, -22.14]
      }
    }]
  }
</script>
...