Question

我想在多边形单击上显示信息窗口，但是使用Internet上的解决方案，我的代码将无法工作。因为我通过获取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，使用它打开一个信息窗口。

    /**** Do not observe Profile Data, because here we only need to observe Http Call State  ***/

    /**** Only Observe State of Profile Http Call  ***/
    mProfileViewModel.getProfileApiStateLiveData().observe(this, profileHttpCallState -> {
        // show/hide progress based on http call state
    });

    /**** start downloading profile data ***/
    mProfileViewModel.loadProfile(true);

    /**** The above line does not trigger the switchMap Transformation. ***/

proof of concept fiddle

代码段：

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

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

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

我希望它也对其他人有用。

单击多边形显示信息窗口

2 个答案: