javascript - 从 map 上删除特定标记?

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

我有一张带有一堆标记的 Google map 。

我将标记逐一添加到 map 中,并且需要时也需要使用单独的 ID 逐一删除各个标记。

目前,我有一些可怕、冗长的代码,涉及全局标记数组、作为元数据添加到每个标记的 ID,以及用于查找数组中标记位置的笨拙方法,如下所示:

  var markersArray = [];
  function getPositionById(markerId, arr) { 
      for (var i = 0; i < arr.length; i++) { 
          if (arr[i].metadata.id === markerId) { 
                  return i;
          }
      }
      return null;
  }
  function removeMarker(markerId) { 
      var marker_position = getPositionById(markerId, markersArray);
      if (marker_position !== null) {
          markersArray[marker_position].setMap(null);
          markersArray.splice(marker_position,1);
      }
  }
  function setMarker(position, markerId) {
      removeMarker(markerId);
      var temp_marker = new google.maps.Marker({
          position: position
      });
      temp_marker.setMap(map);
      temp_marker.metadata = { id: markerId };
      markersArray.push(temp_marker);
  }

有人可以建议一种更优雅的方法吗?

最佳答案

鉴于要从 map 中删除标记,您需要使用 setMap(null),这意味着您需要引用该标记。

您在问题中提出的方式看起来并不像您想象的那么可怕,但另一种方法是使用 map 而不是数组(不确定 map 是否是此处使用的最佳术语,因为我们是已经使用 Google map (Map),尽管如此,使用 map 会让您摆脱 getPositionById() 函数,当然这假设您所有的markerIds都是唯一的。

你的代码看起来像这样。

var markers = {};

function removeMarker(markerId) { 
    if(markers[markerId]){
        markers[markerId].setMap(null);
        delete markers[markerId];
    }
}
function setMarker(position, markerId) {
    removeMarker(markerId);
    var temp_marker = new google.maps.Marker({
        position: position
    });
    temp_marker.setMap(map);
    temp_marker.metadata = { id: markerId };
    markers[markerId] = temp_marker;
}

关于javascript - 从 map 上删除特定标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8247811/

相关文章:

javascript - jQuery 函数不适用于 node.js 中的 express.js 路由

javascript - 如何将 html 帧捕获为图像

android - map View 使用 google Directions API 绘制方向 - 解码多段线

javascript - 如何正确定位 map 以便正确设置折线?

javascript - 如何对使用构造函数创建的 JavaScript 对象方法执行加法

javascript - React-单击按钮时激活下一个选项卡

javascript - 使用 HTML5 地理定位(使用 Meteor js)时,Google map 不会在 Firefox 上显示

java - 通过缩放级别更改半径

javascript - 在谷歌地图上监听键盘事件

javascript - AJAX 加载页面上的 Google map - 如何初始化?