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

时间:2016-08-02 14:18:39

标签: javascript google-maps google-maps-api-3 polygon geojson

我在谷歌地图上添加了一些来自geoj​​son数据的多边形和多边形。 我需要的是,当事件发生时,我会在信息窗口打印出国家/地区的名称。在多边形中。我也设置了一个传奇,我想在活动时重新加载它" 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传递给另一个多边形或多边形时被删除,正如我所说,addlistener适用于函数铸造的最后一个多边形和多边形。 / p>

我不知道它是否有用,但下面是我的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...]]]]}}

我考虑过循环所有多边形和多边形并制作一个多边形数组和一组多边形数组,但它没有用。

1 个答案:

答案 0 :(得分:0)

我找到了答案。我在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;
    }
   });