使用 info windows 显示来自 geojson 的数据

Question

我在向 Google 地图数据层上的信息 windows 显示数据时遇到问题。这里我使用 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));
  });
}

目前我只能在警报方法上使数据应用程序

我想在单击该街道时从信息 windows 中显示数据

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>

使用 info windows 显示来自 geojson 的数据

Display data from geojson using info windows

html

javascript

google-maps

geojson

gmaps.js