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

时间:2017-06-13 13:30:12

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

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

这是我的代码:

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属性可能有问题,但我不确定。 救命啊!

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

在呈现的html中,您的函数应如下所示:

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

为达到此目的,请在您的id参数周围加上其他单引号:

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