即使标记的数组为空，谷歌地图标记也不会删除答案

【问题标题】：google maps markers is not removing even if the array for marker is null即使标记的数组为空，谷歌地图标记也不会删除
【发布时间】：2020-07-03 12:43:09
【问题描述】：

我有一个 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);
    }

[code 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;
}

[code 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 函数 where arrayMAp = []:

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

【问题讨论】：

控制台中是否有任何错误？因为据我所知，findMapNo(1).origin[i] 可能有一个值 false - 它没有 setMap 方法 - 这会引发错误，因此您的代码将停止运行
没有错误，findMapNo(1).origin[i] 也不为空
什么时候调用了删除标记b>代码？它是一个功能吗？目前尚不清楚所有这些代码是如何组合在一起的
您发布的代码 sn-ps 不完整，我收到一个 javascript 错误：Uncaught (in promise) ReferenceError: findMapNo is not defined。什么是findMapNo(1)，它在哪里定义？请提供一个 minimal reproducible example 来证明您的问题。
不需要 JSFiddle。编辑您的问题并创建一个代码 sn-p 在问题本身以提供minimal reproducible example。阅读minimal 和 complete。

标签： javascript google-maps google-maps-markers

【解决方案1】：

您应该将创建的地图标记放在这样的数组中：

var markers[];

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

然后，在删除标记的函数中，您可以通过执行以下操作清除 markers[] 数组并使用标记清除地图：

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

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

注意：请在给定的示例实现中添加您自己的 API 密钥。

【讨论】：