javascript - 即使标记数组为空，谷歌地图标记也不会删除

Question

我有一个谷歌地图，有 1 个目的地和 2 个起点(绿色标记是起点，红色是目的地)。有一个按钮，当我单击时，标记不应再出现在谷歌地图中，​​但是当我单击该按钮时，目的地和 1 个原点将被删除，但即使原始数组已经存在，它们仍然是 1 个原点标记空。

我遵循了文档，但原点标记仍然没有删除。

这是 latlong 数组的示例:

address_latlong: Array(3)[
  0: {lat: " 51.43037899999999", lon: "6.7507253"}
  1: {lat: " 52.4870183", lon: "13.4249841"}
  2: {lat: " 48.1877566", lon: "11.5949554"}]

由于目的地和 2 个起点位于一个数组中，因此我使用它来获取目的地的最后一个值和起点的前 2 个值。 这是一个包含代码 1 和代码 2 的函数内部:

var originArray = [], destinationValues = {}, originValues = {};
var lastLength = origDest.address_latlong.length;
    destinationValues = {
        destLat: origDest.address_latlong[lastLength-1].lat,
        destLon: origDest.address_latlong[lastLength-1].lon,
    };

    for(var i = lastLength - 2; i >= 0; i--){
        originValues = {
            orgLat: origDest.address_latlong[i].lat,
            orgLon: origDest.address_latlong[i].lon,
        };

        originArray.push(originValues);
    }

[代码 1] 这是为单个目的地添加标记的代码:

if(!findMapNo(1).destination){
    var dest = {
        lat: parseFloat(destinationValues.destLat), 
        lng: parseFloat(destinationValues.destLon)
    };

    //for displaying directions
    route_Search.destination = dest;
    route_Search.destinationName = destinationValues.destName;

    if (findMapNo(1).destination != null) {
       console.log("insert here!!!");
       //findMapNo(1).destination.setMap(null);
       findMapNo(1).destination = [];
       if (findMapNo(1).destination.dragend) {
           google.maps.event.removeListener(findMapNo(1).destination.dragend, 'dragend');
       }
             findMapNo(1).destination = false;
     }

        var icon = {
            url: "http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png",
            size: new google.maps.Size(50, 50),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 54),
            scaledSize: new google.maps.Size(50, 50)
        };

        // Create a marker for each place.
        findMapNo(1).destination = new google.maps.Marker({
            map: findMapNo(1).map,
            icon: icon,
            position: dest,
            draggable: false
        });

        findMapNo(1).destination.latLng = dest;
}

[代码 2] 这是多个来源的代码:

for (var i = 0; i < originArray.length; i++) {

        if(!findMapNo(1).origin[i]){
            var length = originArray.length;
            console.log("length: ", length);

            var org = {
                lat: parseFloat(originArray[i].orgLat), 
                lng: parseFloat(originArray[i].orgLon)
            };

            route_Search.origin[i] = org;

            if(findMapNo(1).origin[i] != null) {
                console.log("insert");
                console.log(findMapNo(1).origin[i]);
                findMapNo(1).origin[i].setMap(null);
                if (findMapNo(1).origin[i].dragend) { 
             google.maps.event.removeListener(findMapNo(1).origin[i].dragend, 'dragend');
                }
                findMapNo(1).origin[i] = false;
            }   

            // Create a marker for each place.
            findMapNo(1).origin[i] = new google.maps.Marker({
                map: findMapNo(1).map,
                icon: "http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png",
                position: org,
                draggable: false
            });

            findMapNo(1).origin[i].latLng = org;

这是我用于删除标记的按钮的代码:

$("#portletHead").on("click", ".backCollectionOrigin", function() {
   if (findMapNo(1).destination) {
        //i used 1 here because the the first data is always empty
        for(var i = 1; i < findMapNo(1).origin.length; i++){
            findMapNo(1).origin[i].setMap(null);
        }

        findMapNo(1).origin = [];
        findMapNo(1).destination.setMap(null);
        directionsDisplay.setMap(null);

    }

   }
 }

findMapNo 的函数，其中 arrayMAp = []:

function findMapNo(no) {
    for (i = 0; i < arrayMAp.length; i++) {
        if (arrayMAp[i].mapNo == no) {
            return arrayMAp[i];
        }
    }
 }

Answer 1

您应该将创建的 map 标记放入如下数组中:

var markers[];

function addMarkers(){
    var marker = new google.maps.Marker({
        position: location,
        map: map
   });
        markers.push(marker);
}

然后，在删除标记的函数内，您可以清除 markers[] 数组并通过执行以下操作来清除带有标记的 map :

function deleteMarkers(){
    for(i=0; i<markers.length;i++){
      markers[i].setMap(null);
    }
    markers = [];
  }

下面是一个示例实现，展示了如何在 map 中添加和删除标记:https://jsbin.com/fuxupecepi/edit?html,output

注意:请在给定的示例实现中添加您自己的 API key 。