javascript - 如何删除谷歌地图中的特定多边形添加事件监听器右键单击

Question

我是谷歌地图 API 的新手，我的 map 中有更多多边形，我尝试使用添加事件监听器右键单击选项删除谷歌地图中的特定多边形，这是我的代码。单击特定多边形时无法 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

Answer 1

删除多边形时，添加一个附加属性[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);
        });