javascript - 从 map 上删除标记(Google map )

Question

我有一个ajax请求，一旦用户单击 map ，它就会创建一个标记。一旦用户在特定的点击位置创建了标记，我就会在标记上注册一次点击。

如果用户单击标记，我将显示一个 jquery 对话框，其中包含允许用户从 map 中删除标记或将标记状态设置为事件的按钮。当用户单击标记并从 jquery 对话框中选择“删除标记”时，我在删除标记时遇到问题。

var roadBlockMarker =[{"roadBlockId":null,"purpose":null,"userName":null,"status":null,"latAdd":null,"longAdd":null}];

Ajax 请求创建标记

$.ajax({
   type: 'POST',
   url: 'createRoadBlock.htm',
   async: 'false',
   cache: false,
   data: {
      purpose: f_purpose,
      userName: f_userName,
      status: f_status,
      latAdd: f_latAdd,
      longAdd: f_lngAdd
   },
   dataType: 'json'

}).success(function (recordId) {

   console.log('Road Block created with id ' + recordId);
   //create marker for roadblock
   //create marker for currently clicked location
   var roadblock_img = new google.maps.MarkerImage('/crimeTrack/resources/icons/roadblock_wait.png', null, // size
   null, // origin
   new google.maps.Point(8, 8), // anchor (move to center of marker)
   new google.maps.Size(17, 17)); // scaled size (required for Retina display icon)
   var myLatLng = new google.maps.LatLng(f_latAdd, f_lngAdd);
   roadBlockMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: roadblock_img,
      title: 'Road Block Waiting Progress ' + recordId,
      flat: true,
      optimized: false,
      visible: true
   });


   roadBlockMarker.setMap(map);

   $("#roadblock-dialog").dialog("close");

   //attach a click event so police officers can activate road block or remove it
   google.maps.event.addListener(roadBlockMarker, "click", function () {

      $("#roadblockmarker-dialog").dialog("open");

   });

});

Jquery 对话框在单击标记时调用并显示删除或激活标记的选项

$("#roadblockmarker-dialog").dialog({
    autoOpen: false,
    height: 100,
    width: 380,
    resizable: false,
    modal: true,
    buttons: {
       "Cancel": function () {
          $(this).dialog("close");
       },
       "Remove Marker": function () {

         //how can i remove the marker clicked by the user only?

       },
       "Activate Road Block": function () {
          alert('Activating RoadBlock');
       }
    }
 });

Answer 1

当您打开 click 中的对话框时- 标记的处理程序设置一个包含对标记的引用的对话框选项:

$("#roadblockmarker-dialog")
 //set the option
 .dialog( "option", { marker: this } )
  //open the dialog
  .dialog("open");

然后您可以在函数 Remove Marker 中访问此选项

$(this)
 //close the dialog
 .dialog("close")
  //access the option(marker)
  .dialog( "option" ).marker
   //and remove it
   .setMap(null);