谷歌地图在同一位置放置了两个标记，但经纬度不同

Question

我实际上正在使用 Google Maps API Javascript 进行项目，但遇到了问题。我制作了一个在拖动时刷新标记的函数，但有时，该函数会在我们之前的相同位置添加一个标记，并且有两个坐标错误。我做错了什么？我总是希望在同一位置有一个标记。代码如下：

function getOfficeMarkers(latitude, longitude) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = {
    lat: (typeof (latitude) !== 'undefined') ? latitude : position.coords.latitude,
    lng: (typeof (latitude) !== 'undefined') ? longitude : position.coords.longitude
  };

  var req = {
    method: 'GET',
    url: 'url',
    headers: {
      'Content-Type': 'application/json',
      'Accept-Language': $scope.currentLang,
      'Accept': 'accept'
    }
  };

  $http(req).then(function successCallback(resp) {
    var newOffices = [];
    for (var j = 0; j < resp.data.offices.length; j++) {
      var newOffice = true;
      for (var z = 0; z < offices.length; z++) {
        if (resp.data.offices[j].num === offices[z].num) {
          newOffice = false;
          break;
        }
      }
      if (newOffice) {
        newOffices.push(resp.data.offices[j]);
        offices.push(resp.data.offices[j]);
      }
    }

    for (var i = 0; i < newOffices.length; i++) {
      if(newOffices[i].type === 1) {
        icon = {
          url: 'images/i_mapas_oficina.png',
          scaledSize: new google.maps.Size(40, 40)
        };
      } else if(newOffices[i].type === 11) {
        icon = {
          url: 'images/i_mapas_pinATM.png',
          scaledSize: new google.maps.Size(40,40)
        }
      } else {
        icon = {
          url: 'images/i_mapas_ATM.png',
          scaledSize: new google.maps.Size(40, 40)
        }
      }

      var tempMarker = new google.maps.Marker({
        position: new google.maps.LatLng(resp.data.offices[i].point.lat, resp.data.offices[i].point.lng),
        map: map,
        animation: google.maps.Animation.DROP,
        icon: icon
      });

      marker.push(tempMarker);

      if(newOffices[i].type === 1) {
        infoOffices(tempMarker,
          "Oficina: " + newOffices[i].num + "<br>" +
          newOffices[i].name + "<br>" +
          newOffices[i].address + "<br>" +
          "Tel: " + newOffices[i].phone + "<br>" +
          "Fax: " + newOffices[i].fax);
      } else {
        infoOffices(tempMarker,
          "Cajero: " + newOffices[i].name + "<br>" +
          newOffices[i].address)
      }
    }
  })
});}

function refreshMarkers() {
    var centerlat = map.getCenter().lat();
    var centerlng = map.getCenter().lng();

    getOfficeMarkers(centerlat, centerlng);
  } 

Answer 1

是的，您不是在刷新标记，而是在现有标记之上添加新标记。 最简单的解决方案：让我们在添加新标记之前删除以前的标记。

将此代码与您的合并

var marker = [];  // Somewhere global.  So, this array will contain the marker objects.

...

$http(req).then(function successCallback(resp) {
  // first we will remove the previous markers
  for(var i in marker) {
    marker[i].setMap(null);
  }
  marker = [];  // empty the array

  ...

  var tempMarker = ...
  marker.push(tempMarker);

  ...
}