Question

我正在尝试使用GeoJSON在Google Map上绘制点。当我将鼠标悬停在已加载的标记上时，正在绘制这些点，但未显示文本提示。奇怪的是，手动创建的标记运行良好。我在做什么错了？

<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] }
    }
  ]
}

Answer 1

您需要为设置"title" property of the icon (rollover text)的DataLayer创建样式函数。

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

proof of concept fiddle

代码段：

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>

使用LoadGeoJson绘制标记不会启用鼠标悬停提示

1 个答案: