2016-08-02 52 views
-1

我在谷歌地圖上添加了一些來自geoj​​son數據的多邊形和多面體。 我的需求是當事件「mousemove」在多邊形中時,在infowindow中打印出國家的名稱。我還設置了一個圖例,並且當事件「dblclick」位於多邊形上時,我想重新加載它。在多邊形中添加多個AddListener google地圖

這是我的問題:我不能對所有多邊形和多面體執行「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傳遞到另一個多邊形或MULTIPOLYGON正如我所說的多邊形數組多邊形和多邊形聚被刪除,並且, addlistener適用於由函數執行的最後一個polygon和multipolygon。

我不知道這是否可以幫助,但下面是我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...]]]]}} 

我想到了循環上的所有multipolygons和多邊形,使多邊形的陣列和陣列的陣列的多邊形,但它沒有奏效。

+0

有沒有''地圖'由您的「完整」的代碼創建。請提供一個證明你的問題的[mcve]。 – geocodezip

+0

好吧,我更新了我的代碼,我忘了創建地圖..我沒有把圖標和谷歌地圖鍵的腳本也放在。我的問題還不夠清楚? – Florian

回答

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; 
    } 
    }); 
相關問題