Google 地图 API 使用 geojson 文件点击获取信息窗口

Question

我正在使用 google 地图 API 并且我正在使用 GeoJSON 文件在地图上显示多边形。当用户在多边形内部按下时，我希望出现 InfoWindow 并显示存储在属性中的数据。看起来很简单，但是当我点击多边形时，什么也没有弹出。谁能解释我做错了什么？

以下是我目前正在尝试的：

map.data.loadGeoJson('plant_bounds_2011.json');
     map.data.setStyle({
      fillColor: 'red',
      strokeWeight: 1
    });
    var infowindow = new google.maps.InfoWindow({
        content: "hello"
     });
    map.data.addListener('click', function(event) {
      let id = event.feature.getProperty('ID');
      let name = event.feature.getProperty('HORZ_ORG');
      let html = id + " " + name;
      infowindow.setContent(html); // show the html variable in the infowindow
      infowindow.setPosition(event.feature.getGeometry().get()); // anchor the infowindow at the marker
      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)}); // move the infowindow up slightly to the top of the marker icon
      infowindow.open(map);
    });

Answer 1

发布的代码有一个 javascript 错误：Uncaught TypeError: event.feature.getGeometry(...).get is not a function 行：

infowindow.setPosition(event.feature.getGeometry().get()); // anchor the infowindow at the marker`

一个Data.Polygon geometry doesn't have a .get() method. It has a .getArray() method (which returns an array of LineStrings)

放置 InfoWindow 的一个位置是单击的点（在多边形中）：

infowindow.setPosition(event.latLng);

（如果您想将信息窗口的固定点添加到 GeoJson，或者您想从多边形计算固定点，您也可以这样做）

proof of concept fiddle

代码片段：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      zoom: 4,
      center: {
        lat: -28,
        lng: 137
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
  map.data.setStyle({
    fillColor: 'red',
    strokeWeight: 1
  });
  var infowindow = new google.maps.InfoWindow({
    content: "hello"
  });
  map.data.addListener('click', function(event) {
    let id = event.feature.getProperty('ID');
    let name = event.feature.getProperty('HORZ_ORG');
    if (typeof id == "undefined") id = event.feature.getProperty('letter');
    if (typeof name == "undefined") name = event.feature.getProperty('color');
    let html = id + " " + name;
    infowindow.setContent(html); // show the html variable in the infowindow
    infowindow.setPosition(event.latLng);
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, 0)
    }); // move the infowindow up slightly to the top of the marker icon
    infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Google 地图 API 使用 geojson 文件点击获取信息窗口

Google maps API getting infowindow on click with geojson file

geojson

infowindow

google-maps-api-3