2015-12-24 54 views
-1

我是新來的谷歌地圖API,我有更多的多邊形在我的地圖,我嘗試刪除谷歌地圖中使用添加事件偵聽器的特定多邊形右鍵單擊選項,這裏是我的代碼。同時點擊特定的多邊形不能setMap(NULL);如何刪除谷歌地圖中的特定多邊形添加事件偵聽器右鍵點擊

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=true"></script> 

<script> 
function initialize() { 
    alert("ok"); 
    var mapOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(24.4799425,73.0934957), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    var arr = new Array(); 
    var polygons = []; 
    var bounds = new google.maps.LatLngBounds(); 
    var coordinates = []; 
    var marker = new google.maps.Marker; 
    var getBounds; 

    // downloadUrl("subdivision-coordinates.php", function(data) { 
     //var xmlString = $('#xml_values').val(); 
     var xmlString ="<subdivisions><subdivision name='Madivala'><coord lat='12.920496072962534' lng='77.6198673248291' id='6' /><coord lat='12.92409332232521' lng='77.62896537780762' id='6' /><coord lat='12.927439554274295' lng='77.6209831237793' id='6' /><coord lat='12.923340413955895' lng='77.61634826660156' id='6' /><coord lat='12.92066338803538' lng='77.61960983276367' id='6' /></subdivision><subdivision name='Sarjapur'><coord lat='12.91706608927013' lng='77.62372970581055' id='7' /><coord lat='12.9158948645401' lng='77.6389217376709' id='7' /><coord lat='12.919659495917085' lng='77.64299869537354' id='7' /><coord lat='12.92409332232521' lng='77.64793395996094' id='7' /><coord lat='12.92480440036714' lng='77.63424396514893' id='7' /><coord lat='12.920998017844783' lng='77.62089729309082' id='7' /></subdivision><subdivision name='Domulur'><coord lat='12.967758119178917' lng='77.63282775878906' id='8' /><coord lat='12.962237705403682' lng='77.65179634094238' id='8' /><coord lat='12.950025446093244' lng='77.64226913452148' id='8' /><coord lat='12.963826927981351' lng='77.6308536529541' id='8' /><coord lat='12.967507193936736' lng='77.63299942016602' id='8' /></subdivision><subdivision name='Indira Nagar'><coord lat='12.982227713276773' lng='77.63505935668945' id='9' /><coord lat='12.985154985380868' lng='77.64518737792969' id='9' /><coord lat='12.965834352522322' lng='77.64904975891113' id='9' /><coord lat='12.965834352522322' lng='77.63694763183594' id='9' /><coord lat='12.982060439543622' lng='77.63497352600098' id='9' /></subdivision><subdivision name='Mariyapan Palya'><coord lat='12.97846402705198' lng='77.54322052001953' id='10' /><coord lat='12.9792167688559' lng='77.56536483764648' id='10' /><coord lat='12.95671716919877' lng='77.56914138793945' id='10' /><coord lat='12.956298941771568' lng='77.54373550415039' id='10' /></subdivision></subdivisions>"; 
     var xml = xmlParse(xmlString); 
     var subdivision = xml.getElementsByTagName("subdivision"); 
     for (var i = 0; i < subdivision.length; i++) { 
      arr = []; 
      var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord"); 
      //console.log("coordinates="+xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord")); 


      for (var j=0; j < coordinates.length; j++) { 
       arr.push(new google.maps.LatLng(
        parseFloat(coordinates[j].getAttribute("lat")), 
        parseFloat(coordinates[j].getAttribute("lng")) 
      )); 

       var idd=coordinates[j].getAttribute("id"); 
       bounds.extend(arr[arr.length-1]); 

      } 

      polygons.push(new google.maps.Polygon({ 
       id: idd, 
       paths: arr, 
       strokeColor: '#BA55D3', 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: '#DA70D6', 
       fillOpacity: 0.35 
      })); 
      polygons[polygons.length-1].setMap(map); 

      polygons[polygons.length-1].addListener('click', function (event) { 
       //alert(this.id); 
        var service_name=$('input[name="map_service"]:checked').val(); 
        $('#add_to_qh').val(this.id); 
        $('#loc_edit_page').attr('href',"locality_service_edit.php?geoId="+this.id+"&service="+service_name); 
        $("#myModal").modal(); 
      }); 
      polygons[polygons.length-1].addListener('rightclick', function (event) { 

       console.log("Need to delete the clicked polygon"); 
      }); 


     } 

    map.fitBounds(bounds); 

      google.maps.event.addListener(map, 'idle', function() { 
      zoomLevel = map.getZoom(); 
       center=map.getCenter(); 

       var bounds1 = map.getBounds(); 

       var min_lat = bounds1.getSouthWest().lat(); 
       var min_lng = bounds1.getSouthWest().lng(); 

       var max_lat = bounds1.getNorthEast().lat(); 
       var max_lng = bounds1.getNorthEast().lng(); 

       var nw = new google.maps.LatLng(min_lat, max_lng); 
       var se = new google.maps.LatLng(max_lat, min_lng); 

       var area22=google.maps.geometry.spherical.computeArea([bounds1.getNorthEast(),se, bounds1.getSouthWest(), nw]); 
       //Area chage meter2 to meter 
       area22 = area22/1000000; 


       var min_area = area22-((area22*20)/100); 
       var max_area = area22+((area22*20)/100); 

       $('#area').val(area22); 

       $('#min_area').val(min_area); 
       $('#max_area').val(max_area); 

       $('#min_lat').val(min_lat); 
       $('#max_lat').val(max_lat); 
       $('#min_lng').val(min_lng); 
       $('#max_lng').val(max_lng); 

       //console.log("Zoommmmmm my area="+area+" Min Area="+min_area+ " Max Area="+max_area); 
      }); 


} 

/** 
* Parses the given XML string and returns the parsed document in a 
* DOM data structure. This function will return an empty DOM node if 
* XML parsing is not supported in this browser. 
* @param {string} str XML string. 
* @return {Element|Document} DOM. 
*/ 
function xmlParse(str) { 
    if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') { 
    var doc = new ActiveXObject('Microsoft.XMLDOM'); 
    doc.loadXML(str); 
    return doc; 
    } 

    if (typeof DOMParser != 'undefined') { 
    return (new DOMParser()).parseFromString(str, 'text/xml'); 
    } 

    return createElement('div', null); 
} 

$(function(){ 
initialize(); 
}); 

</script> 

    <div id="map-canvas" style="height:620px;" ></div> 

how to delete the particular polygon in google maps add event listener right click 

回答

0

當您刪除多邊形時,添加其他屬性[auto_id]以標識多邊形,例如,

 polygons.push(new google.maps.Polygon({ 
      auto_id:i, 
      id: idd, 
      paths: arr, 
      strokeColor: '#BA55D3', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#DA70D6', 
      fillOpacity: 0.35 
     })); 

     polygons[polygons.length-1].addListener('rightclick', function (event) { 
      polygons[this.auto_id].setMap(null); 
     }); 
相關問題