使用信息窗口显示来自geoj​​son的数据

Question

我无法在Google Maps Data层的信息窗口中显示数据。在这里，我使用Geojson加载数据。有人可以帮我吗？

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -2.9365327, lng: 104.4950964}
  });

  map.data.loadGeoJson(
    'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_rivers_lake_centerlines.geojson');
  console.log( map.data);

 var ced = google.maps.event.addListener(map.data,'click',function(event) {       
    console.log(event.feature.f)
    alert("Koordinat:lat: "+event.latLng.lat()+", lng: "+event.latLng.lng());
    alert(JSON.stringify(event.feature.f));
  });
}

此刻，我只能使数据处理程序成为警报方法    

我想在点击该街道时从信息窗口中显示数据

Answer 1

您需要创建一个InfoWindow，向其中添加内容，为其指定位置，然后在其上调用open：

var ced = google.maps.event.addListener(map.data, 'click', function(event) {
  console.log(event.feature.f)
  infowindow.setContent("Koordinat:lat: " + event.latLng.lat() + ", lng: " + event.latLng.lng() + "<br>" + JSON.stringify(event.feature.f));
  infowindow.setPosition(event.latLng);
  infowindow.open(map);
});

概念验证代码段：

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

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

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {
        lat: -2.9365327,
        lng: 104.4950964
      }
    });
    var infowindow = new google.maps.InfoWindow();
    map.data.loadGeoJson(
      'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_rivers_lake_centerlines.geojson');
    console.log(map.data);

    var ced = google.maps.event.addListener(map.data, 'click', function(event) {
      console.log(event.feature.f)
      infowindow.setContent("Koordinat:lat: " + event.latLng.lat() + ", lng: " + event.latLng.lng() + "<br>" + JSON.stringify(event.feature.f));
      infowindow.setPosition(event.latLng);
      infowindow.open(map);
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY"></script>