Google Maps API单击带有geojson文件的信息窗口 [英] Google maps API getting infowindow on click with geojson file

问题描述

我正在使用Google Maps API，并且正在使用GeoJSON文件在地图上显示多边形.当用户在多边形内按下时，我想显示 InfoWindow 并显示存储在属性中的数据.似乎很容易，但是当我单击多边形时，没有弹出任何内容.谁能解释我在做什么错?

以下是我目前正在尝试的操作:

  map.data.loadGeoJson('plant_bounds_2011.json');map.data.setStyle({fillColor:'红色'，重量:1});var infowindow = new google.maps.InfoWindow({内容:你好"});map.data.addListener('click'，function(event){让id = event.feature.getProperty('ID');让名称= event.feature.getProperty('HORZ_ORG');让html = id +" +名称;infowindow.setContent(html);//在信息窗口中显示html变量infowindow.setPosition(event.feature.getGeometry().get());//将信息窗口锚定在标记处infowindow.setOptions({pixelOffset:new google.maps.Size(0，-30)});//将信息窗口稍微向上移到标记图标的顶部infowindow.open(map);}); 

解决方案

发布的代码存在JavaScript错误:未捕获的TypeError:event.feature.getGeometry(...).get不是函数行上:

  infowindow.setPosition(event.feature.getGeometry().get());//将信息窗口锚定在标记上 

A

代码段:

  function initialize(){var map = new google.maps.Map(document.getElementById("map_canvas")，{变焦:4中央: {纬度:-28，lng:137}，mapTypeId:google.maps.MapTypeId.ROADMAP});map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');map.data.setStyle({fillColor:'红色'，重量:1});var infowindow = new google.maps.InfoWindow({内容:你好"});map.data.addListener('click'，function(event){让id = event.feature.getProperty('ID');让名称= event.feature.getProperty('HORZ_ORG');如果(typeof id =="undefined")id = event.feature.getProperty('letter');如果(typeof name =="undefined")name = event.feature.getProperty('color');让html = id +" +名称;infowindow.setContent(html);//在信息窗口中显示html变量infowindow.setPosition(event.latLng);infowindow.setOptions({pixelOffset:新的google.maps.Size(0，0)});//将信息窗口稍微向上移到标记图标的顶部infowindow.open(map);});}google.maps.event.addDomListener(窗口，加载"，初始化);  

  html，身体，#map_canvas {高度:100％;宽度:100％;边距:0px;填充:0px}  

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

I am using the google maps API and I am displaying polygons on a map using a GeoJSON file. When the user presses inside the polygon, I would like an InfoWindow to appear and display data that is stored in the properties. Seems easy enough but when I am clicking on the polygons, nothing is popping up. Can anyone explain what I am doing wrong?

Below is what I am currently attempting:

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);
    });

解决方案

There is a javascript error with the posted code: Uncaught TypeError: event.feature.getGeometry(...).get is not a function on the line:

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

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

One location to place the InfoWindow at would be the point clicked (which is in the polygon):

infowindow.setPosition(event.latLng);

(if you want to either add an fixed point for the infowindow to the GeoJson or you want to compute a fixed point from the polygon you can do that as well)

proof of concept fiddle

code snippet:

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 Maps API单击带有geojson文件的信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！