单击多边形时显示信息 Window

Question

我想在点击多边形时显示信息 windows，但使用互联网上的解决方案，我的代码无法正常工作。因为我通过获取 geojson 数据来获取构成多边形的所有数据。我也在给它上色。单击时，我可以获得单击的多边形的功能，但无法让 polygon 本身在其上方打开 infowindow。有人可以帮我解决这些问题吗？

这是我的多边形的代码；

provinces_of_turkey = new google.maps.Data(); // POLYGON FOR PROVINCES
  provinces_of_turkey.loadGeoJson(
    'https://gist.githubusercontent.com/oividioscaeremos/5db86935a005c1e091657636c3a39b4b/raw/93af322ffef76b1b77384611778beafaf06b6fed/provinces_of_turkey_minified.json'
  );
  provinces_of_turkey.setStyle(function(feature) {
    if(feature.getProperty("NUFUS") > 0 && feature.getProperty("NUFUS") < 50000){
      return ({
        fillColor: '#ffff00',
        zIndex: 3,
        fillOpacity: .65,
        strokeColor: '#000000',
        strokeWeight: 1
      });
    }else if(feature.getProperty("NUFUS") > 50001 && feature.getProperty("NUFUS") < 150000){
      return ({
        fillColor: '#ffdb00',
        zIndex: 3,
        fillOpacity: .65,
        strokeColor: '#000000',
        strokeWeight: 1
      });
    }else if(feature.getProperty("NUFUS") > 150001 && feature.getProperty("NUFUS") < 250000){
      return ({
        fillColor: '#ffb700',
        zIndex: 3,
        fillOpacity: .65,
        strokeColor: '#000000',
        strokeWeight: 1
      });
    }else if(feature.getProperty("NUFUS") > 250001 && feature.getProperty("NUFUS") < 350000){
      return ({
        fillColor: '#ff9300',
        zIndex: 3,
        fillOpacity: .65,
        strokeColor: '#000000',
        strokeWeight: 1
      });
    }else if(feature.getProperty("NUFUS") > 350001 && feature.getProperty("NUFUS") < 1000000){
      return ({
        fillColor: '#ff6f00',
        zIndex: 3,
        fillOpacity: .65,
        strokeColor: '#000000',
        strokeWeight: 1
      });
    }else if(feature.getProperty("NUFUS") > 1000001 && feature.getProperty("NUFUS") < 3000000){
      return ({
        fillColor: '#ff4b00',
        zIndex: 3,
        fillOpacity: .65,
        strokeColor: '#000000',
        strokeWeight: 1
      });
    }else{
      return ({
        fillColor: '#ff0000',
        zIndex: 3,
        fillOpacity: .65,
        strokeColor: '#000000',
        strokeWeight: 1
      });
    }
  });

我如何为这张地图上的多边形设置一个监听器？

如果我能得到多边形的边界，它也可以工作。我可以为这些 latlng 值设置一些东西。

Answer 1

Add an event listener to the data layer，用它来打开一个信息窗口。

var infowindow = new google.maps.InfoWindow();

map.data.addListener('click', function(event) {
  infowindow.setContent("this is an infowindow<br>on letter "+event.feature.getProperty('letter'));
  infowindow.setPosition(event.latLng);
  infowindow.open(map);
});

proof of concept fiddle

代码片段：

var map;

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

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json');

  var infowindow = new google.maps.InfoWindow();

  map.data.addListener('click', function(event) {
    infowindow.setContent("this is an infowindow<br>on letter " + event.feature.getProperty('letter'));
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
  });
}

#map {
  height: 100%;
}

html,
body {
  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>

Answer 2

伙计们，我找到了一种覆盖我的代码的方法。不知何故，geocodezip 建议的解决方案对我没有用。所以我将侦听器添加为 google.maps.events 侦听器，这似乎工作得很好。

google.maps.event.addListener(provinces_of_turkey, 'click', function (event) {
    infoWindowPolygons.setPosition(event.latLng);
    infoWindowPolygons.setContent("<h2>"+ event.feature.getProperty("NAME_1")+"</h2>"+
    "<p>Province Population:"+ event.feature.getProperty("NUFUS")+"</p>");
    infoWindowPolygons.open(map);
  });

我希望它也适用于其他人。

单击多边形时显示信息 Window

Showing Info Window on click for polygons

google-maps

google-maps-api-3