在多边形谷歌地图中添加多个 AddListener

Question

我在谷歌地图上添加了来自 geojson 数据的一些多边形和多多边形。 当事件“mousemove”在多边形中时，我需要在信息窗口中打印出国家/地区的名称。我还设置了一个图例，当事件“dblclick”出现在多边形上时，我想重新加载它。

这是我的问题：我不能为所有多边形和多面体执行“mousemove”和“dblclick”事件，它只需要我的函数投射的最后一个多边形和多面体。

这是我的完整代码（更新）：

 var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    });
    var countries = ['Germany','France','Moldova','Italy','Spain'];
    var infoWindow = document.createElement('div');
         infoWindow.id = 'infoWindow';
         var content1 = [];
         content1.push('<h3>Default </h3>');

         infoWindow.innerHTML = content1.join('');
         infoWindow.index = 2;
         map.controls[google.maps.ControlPosition.TOP_RIGHT].push(infoWindow);

   var state = new google.maps.Data();
   var poly ;
   var polys = new Array();


   var gaArr = new Array();
   var p = 0;
   var mp = 0;

//the problem is here
   state.addListener('addfeature',function(evt) {
//my 5 objects pass here
    var CouName = evt.feature.getProperty('name');
     if (evt.feature.getProperty('type') == 'Polygon') {
      var ga = state.getFeatureById(CouName);
      var gaGeom = ga.getGeometry();
      gaArr = gaGeom.getAt(0).getArray();
      poly = new google.maps.Polygon({paths:gaArr, map:map,clickable:false,visible:false});
       google.maps.event.addListener(map,'dblclick',function(evt){
      if (google.maps.geometry.poly.containsLocation(evt.latLng, poly)) {
        legend.innerHTML =  CouName;
        }
      });

    google.maps.event.addListener(map,'mousemove',function(evt){
      if (google.maps.geometry.poly.containsLocation(evt.latLng, poly)) {
        infoWindow.innerHTML = CouName;
        }
    });
    p++;

     }

      if (evt.feature.getProperty('type') == 'MultiPolygon') {
       var ga = state.getFeatureById(CouName);
       var gaGeom = ga.getGeometry();
       gaArr = gaGeom.getArray();
       for (var i=0;i<gaGeom.getArray().length;i++){
        polys[i]= new google.maps.Polygon({paths:gaArr[i].getAt(0).getArray(), map:map,clickable:false,visible:false});
       }

       google.maps.event.addListener(map,'dblclick',function(evt){
    for(var i=0;i<gaArr.length;i++){
      if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
        legend.innerHTML = CouName;
        }
      }
      });

   google.maps.event.addListener(map,'mousemove',function(evt){
    for(var i=0;i<gaArr.length;i++){
      if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
        infoWindow.innerHTML = CouName;
        }
      }
      });
   mp++;
   }
    });
    for (var country in countries){
             state.loadGeoJson('http://.../GoogleMaps/'+countries[country]+'.geojson', {
             idPropertyName: 'name'

             });

    }
   state.setMap(map);
   //to color the polygons
   state.setStyle(function(feature) {

            var k = feature.getProperty('color');
            return {
                fillOpacity:0.6,
                fillColor:k,
                strokeWeight:1,
                clickable: false
            }
        });

我认为问题是当 state.addListener 传递给另一个多边形或多多边形时，多边形数组 polys 和多边形 poly 被删除，正如我所说，addlistener 适用于函数投射的最后一个多边形和多多边形。

我不知道它是否有帮助，但以下是我的 geojson 文件的示例：

{"type":"Feature","properties":{"color":"purple","name":"Germany","type":
 "MultiPolygon"},"geometry":{"type": "MultiPolygon","coordinates":
[[[[8.5636100769042969,54.684165954589844],
[8.5948600769042969,54.719856262207031],[8.5851364135742187,54.7445068359375],
[8.5511093139648437,54.753883361816406],[8.4447212219238281,54.74832...]]]]}}


{"type":"Feature","properties":{"name": "Moldova","color":"green","type": 
"Polygon"},"geometry":{"type": "Polygon","coordinates":
[[[28.108325958251953,46.102291107177734],[28.0...]]]]}}

我想过在所有多面体和多边形上循环，并制作一个多边形数组和一个多边形数组，但没有奏效。

Answer 1

我找到了答案。我在 state.addListener 下面更新：

state.addListener('addfeature',function(evt) {

    var CouName = evt.feature.getProperty('name');
     if (evt.feature.getProperty('type') == 'Polygon') {
      var c = p;
      var ga = state.getFeatureById(CouName);
      var gaGeom = ga.getGeometry();
      gaArr = gaGeom.getAt(0).getArray();
      //here I push all my polygons in my array poly
      poly.push(new google.maps.Polygon({paths:gaArr, map:map,clickable:false,visible:false}));
       google.maps.event.addListener(poly[c],'dblclick',function(evt){
        alert(poly.length);
        if (google.maps.geometry.poly.containsLocation(evt.latLng, poly[c])) {
        legend.innerHTML =  CouName;
        }
      });

    google.maps.event.addListener(map,'mousemove',function(evt){
      if (google.maps.geometry.poly.containsLocation(evt.latLng, poly[c])) {
        infoWindow.innerHTML = CouName;
        }
    });
    p++;

     }

      if (evt.feature.getProperty('type') == 'MultiPolygon') {

       var cp= mp;


       var ga = state.getFeatureById(CouName);
       var gaGeom = ga.getGeometry();
       gaArr = gaGeom.getArray();

       for (var i=0;i<gaGeom.getArray().length;i++){
        //here I push all my polygons of my multipolygons in my array polys
        polys.push(new google.maps.Polygon({paths:gaArr[i].getAt(0).getArray(), map:map,clickable:false,visible:false}));
       }

       google.maps.event.addListener(map,'dblclick',function(evt){

    for(var i=cp;i<cp+gaGeom.getArray().length;i++){

      if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
        legend.innerHTML = CouName;
        }
      }
      });

   google.maps.event.addListener(map,'mousemove',function(evt){
    for (var i=cp;i<cp+gaGeom.getArray().length;i++){
      if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
        infoWindow.innerHTML = CouName;
        }
      }
      });
   mp=mp+gaGeom.getArray().length;
    }
   });