2017-06-13 74 views
1

我使用帮助geoXml3在我的网站上显示KML地图。有多边形和标记。但是当我想用多边形做一些点击操作时,什么都不会发生。我想更改颜色按多边形并更改颜色兄弟多边形。可以帮我? 这是我的代码:如何更改颜色多边形(kml + geoXml)?

function initialize(){ 
    myLatLng = new google.maps.LatLng(-34.397, 150.644); 

    var myOptions = { 
     center: {lat: 55.864237, lng: -4.251806}, 
     zoom: 12, 
     scrollwheel: false, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 

    geoXml = new geoXML3.parser({ 
     map: map, 
     singleInfoWindow: true, 
     afterParse: myfunction 
    }); 
    geoXml.parse('http://165.227.72.239/wp-content/uploads/2016/09/glasgow.kml'); 
} 

function myfunction(doc){ 

    google.maps.event.addListener(doc,"click",function() { 
     console.log('gdf'); 
     for (var i=0;i<doc.gpolygons.length;i++) 
      doc.gpolygons[i].setOptions({strokeColor: "#000"}); 
    }); 
} 
initialize(); 

回答

0

我相信我有一个解决方案。

另外,我会给一个plug to my GeoXML3 example on Github

var geoXml; 

function initialize() { 
    myLatLng = new google.maps.LatLng(-34.397, 150.644); 

    var myOptions = { 
     center: {lat: 55.864237, lng: -4.251806}, 
     zoom: 12, 
     scrollwheel: false, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 

    geoXml = new geoXML3.parser({ 
     map: map, 
     singleInfoWindow: true, 
     afterParse: myfunction 
    }); 
    geoXml.parse('http://165.227.72.239/wp-ontent/uploads/2016/09/glasgow.kml'); 
} 

function myfunction(doc){ 
    // doc coming in is an array of objects from GeoXML3, one per KML. Since there's only 1, 
    // we'll assumpe 0 is our target and we wnant gpolygons, an array of Google Maps Polygon instances 
    var polygons = doc[0].gpolygons; 

    for (polygonindex = 0, loopend = polygons.length; polygonindex < loopend; polygonindex++) { 
     google.maps.event.addListener(polygons[polygonindex], "click", function() { 
      console.log('gdf'); 
      this.setOptions({strokeColor: "#000"}); 
     }); 
    } 
} 
initialize();