Google Maps setzen zwei Marker an der gleichen Stelle, aber unterschiedliche Breite und Länge

Question

Ich arbeite tatsächlich an einem Projekt mit Google Maps API Javascript, und habe ein Problem. Ich habe eine Funktion erstellt, die die Markierungen aktualisiert, wenn es dragend ist, aber manchmal fügt die Funktion eine Markierung an der gleichen Stelle wie zuvor hinzu und hat zwei mit schlechten Koordinaten. Was mache ich falsch? Ich möchte immer einen Marker am selben Ort haben. Hier ist der Code:

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

Ja, Sie sind nicht die Marker aktualisieren, Sie fügen nur neue oben auf den vorhandenen. Die einfachste Lösung: Löschen Sie die vorherigen Markierungen, bevor Sie die neuen hinzufügen.

Merge diesen Code mit Ihrem

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); 

    ... 
}