从地图中删除标记(谷歌地图)

时间:2013-11-09 03:10:46

标签: javascript jquery google-maps-api-3 google-maps-markers

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

如果用户点击标记我正在显示一个jquery对话框,其中的按钮允许用户从地图中删除标记或将标记状态设置为活动状态。一旦用户点击标记并从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');
       }
    }
 });

1 个答案:

答案 0 :(得分:2)

当您在标记的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);