更新了标记的位置，但前一个仍显示在 google maps api 中答案

【问题标题】：updated the position of the marker but the previous one is still displayed in google maps api更新了标记的位置，但前一个仍显示在 google maps api 中
【发布时间】：2015-12-01 18:02:49
【问题描述】：

我对谷歌地图 API 很陌生，我通过 ajax 更新了我的标记的坐标。我希望标记喜欢、移动，但它就像使用新坐标生成一个新坐标，而前一个坐标仍然存在。当我用新坐标更新标记时，如何删除旧标记？

maps.html

<!DOCTYPE html>
<html>
  <head>
   <style>
    #map {
    width: 800px;
    height: 600px;
   }
 </style>
 <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?v=3& 
  amp;key=AIzaSyDh0-6mPaP9RezyUZkrv2uqX8BGh3nzFCM"></script>
 <script src="maps.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

maps.js

 function initialize() {

    // Create a map object and specify the DOM element for display.
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)

    setInterval(function(){
       requestLatLng('getlatlng.php', function(data){
      var data = JSON.parse(data.responseText);
       displayMarker(data);
       //alert(parseFloat(data.latitude) + " " + parseFloat(data.longitude))
       console.log(parseFloat(data.latitude) + "   " + parseFloat(data.longitude));
      map.setCenter(new google.maps.LatLng(parseFloat(data.latitude), parseFloat(data.longitude)));
    });     
    }, 3000);

    var gmarkers = [];
    var marker;

  function displayMarker(data){
      var myLatLng = {lat: parseFloat(data.latitude), lng: parseFloat(data.longitude)};
      var title = data.name + ", " + data.country;

      marker = new google.maps.Marker({
        map: map,
        position: myLatLng,
        title: title
      });

      if(gmarkers.length < 1){
        gmarkers.push(marker);
      }


      console.log(gmarkers.length);
      //console.log("x: " + gmarkers[0].tg.xa.x + "\ny: "+ gmarkers[0].tg.xa.y)
    }
  }

  function requestLatLng(url, callback){
    var request;

    if(window.XMLHttpRequest){
      request = new XMLHttpRequest();
    }else{
      request = new ActiveXObject("Microsoft.XMLHTTP");
    }

    request.onreadystatechange = function(){
      if(request.readyState == 4 && request.status == 200){
          callback(request);
      }
    }


    request.open("GET", url, true);
    request.send();
  }
  google.maps.event.addDomListener(window, 'load', initialize);

getlatlng.php

<?php  
header('Content-type: application/json');

define('HOST', 'localhost');     // The host you want to connect to.
define('USER', 'root');    // The database username.
define('PASSWORD', '');    // The database password.
define('DATABASE', 'rummage');    // The database name.

global $conn;

// Check connection
try{

    $conn = new PDO('mysql:host = '.HOST.';dbname='.DATABASE, USER, PASSWORD);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    //echo 'Connected successfully';

}catch (PDOException $e) {

    echo "Connection failed " . $e->getMessage();

}

$id = 21;
$query = $conn->prepare("SELECT * FROM regions where id = ?");
$query->execute(array($id));

while($row = $query->fetch()){
        $rows[] = $row;
}

foreach ($rows as $roww) {
    echo json_encode($roww);
}

?>

这是我的 getlatlng.php 文件的 json 输出：

{"id":"19","0":"19","country":"AF","1":"AF","code":"06","2":"06 ","名称":"法拉\r","3":"法拉\r","纬度":"32.3754","4":"32.3754","经度":"62.1123","5": "62.1123","城市":"0","6":"0"}

【问题讨论】：

标签： javascript php ajax google-maps-api-3

【解决方案1】：

在你的 displayMarker() 函数中，在开头试试这个：

if (marker) {
    marker.setMap(null);
    marker = null;
}

【讨论】：

【解决方案2】：

我建议你查看这篇文章：

Building a Google Maps Application with Updating Markers

他使用 html 中的数组来保存所有已保存的标记，然后更新它们。如果是新的，他只需创建它并将其放入列表中。

编辑：

我就是这样做的：

//Used to remember markers
var markerStore = {};

//Time between marker refreshes
var INTERVAL = 250;

function getMarkers() {
    $.ajax({
        type: 'GET',
        url: 'webresources/mobile/retrieve-position',
        contentType: 'application/json',
        dataType: "json", //linea fragril
        beforeSend: function (xhr) {
            // Set the CSRF Token in the header for security
            var token = window.sessionStorage.accessToken;
              if (token) {
                xhr.setRequestHeader('userToken', token);
              }
               else {
                xhr.abort();
            }
        },
        success: function (res, textStatus, jqXHR) {
            if (jqXHR.status !== 204) {
                for (var i = 0; i < res.length; i++) {
                    if (markerStore.hasOwnProperty(res[i].username)) {
                        //Check if marker is still alive
                        if(res[i].alive){

                          Destroy the marker  
                          markerStore[res[i].username].setMap(null);

                        }
                        else{
                            Change markers position reading the new marker information. 
                            markerStore[res[i].username].setPosition(new google.maps.LatLng(res[i].lat, res[i].long));
                        }
                    } 
                    else {
                        //If it doesnt exist, create a new one.
                        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + res[i].color);
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(res[i].lat, res[i].long),
                            title: res[i].username,
                            icon: pinImage,
                            map: map
                        });
                        markerStore[res[i].username] = marker;
                        console.log(marker.getTitle());
                    }
                }
                window.setTimeout(getMarkers, INTERVAL);
            }
        },
        error: function () {

            console.log("Error loading markers.");
        }
    });
}

【讨论】：

我会试试这个。谢谢。
Np，请始终确保具有唯一标识符。 :)