使用自定义删除按钮从谷歌地图中删除标记答案

【问题标题】：Deleting a marker from google maps with custom delete button使用自定义删除按钮从谷歌地图中删除标记
【发布时间】：2017-06-13 13:30:12
【问题描述】：

我正在尝试通过自定义删除按钮从谷歌地图中删除标记。我在信息窗口中添加了按钮和其他信息。我有一个从地图中删除标记的功能，问题是当我按下删除按钮时，该功能没有被调用。

这是我的代码：

function initMap() {

var jsonData = {$pointsArray};

var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
       maxzoom: 15,
        center: {
           lat: 38,
           lng: -77
         }
     });

 function addInfoWindow(marker, message) {

         var infoWindow = new google.maps.InfoWindow({
             content: message
         });

         google.maps.event.addListener(marker, 'click', function () {
             infoWindow.open(map, marker);
         });
     }

 var bounds = new google.maps.LatLngBounds();

 for (var i = 0, len = jsonData.length; i < len; ++i) {

    var point = jsonData[i];
    var uniqueId = 1;
    var  markers = [];
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(point.Lat, point.Lon),
        map: map,
        title: point.Title
    });

 bounds.extend(marker.position);
 marker.id = uniqueId;
         uniqueId++;

    var contentString = '<div id="content">'+
                     '<h4 id="pointId" > ' + point.Title + '</h4>'+
                     '<h6 >City: ' + point.City + '</h6>'+
                     '<h6 >Latitude: ' + point.Lat+ '</h6>'+
                     '<h6 >Longitude: ' + point.Lon + '</h6>'+
                     '<h6 >Address: ' + point.Address + '</h6>'+
                     '<p data-placement="top" data-toggle="tooltip" title="Delete"><a href="" onclick= "DeleteMarker( "+ marker.id +"  );"  class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></a></p>'

                    '</div>';
    addInfoWindow(marker, contentString);
    markers.push(marker);
 }

 function DeleteMarker(id) {

    for (var i = 0; i < markers.length; i++) {
        if (markers[i].id == id) {
            markers[i].setMap(null);
            markers.splice(i, 1);
            return;
        }
    }
};

  map.fitBounds(bounds);
 }

可能删除按钮中的onclick属性有问题，但我不确定。救命！

【问题讨论】：

按下按钮时调用什么？请即按钮的代码。
也许这个答案有帮助stackoverflow.com/a/31496676/3592827

标签： javascript google-maps google-maps-api-3 onclick

【解决方案1】：

我认为当您想将 marker.id 作为参数时，您必须使用 ' 而不是 "，因为您使用 ' 作为字符串，使用 " 作为属性值。如果你使用 " 你只是中断了 onclick 值的属性字符串。

【讨论】：

我也试过了，但调试时出现语法错误。我把它改成了这样：'DeleteMarker(" + marker.id + ");' ，不起作用。
如果你有一个以'开头的字符串并且你想在字符串中第二次使用'你必须使用\'例如像这样'......onclick = "DeleteMarker (\' '+ marker.id + ' \' );".....'

【解决方案2】：

在呈现的 html 中，您的函数应如下所示：

<p><a onclick="DeleteMarker('some id');"</a></p>

为了实现这一点，请在您的 id 参数周围加上额外的单引号：

onclick="deleteMarker('+"'"+ yourId +"'"+')

【讨论】：