删除先前的标记并在更新的 lat lng 中添加标记答案

【问题标题】：Remove the previous marker and add marker in the updated lat lng删除先前的标记并在更新的 lat lng 中添加标记
【发布时间】：2015-12-17 05:38:55
【问题描述】：

我有一个 GPS 设备，它每 10 秒发送一次数据。我将数据（lat、lng）保存在 MySql 数据库中。我正在从数据库中检索数据并使用 xmlHttpRequest() 将标记放在这些 lat lng 上。我还在 10 秒内使用 setInterval() 到 xmlHttpRequest。标记被很好地添加，但在刷新整个站点后添加新标记，而不是在 xmlhttpreq 上的 10 秒后添加。

我还有两个问题 -

我的 xmlHttpRequest() 在 10 秒后刷新正常，并从 Network,XHR 中看到 get_data.php 文件，但它没有在地图上添加新标记，但 10 秒后请求 xmlHttp .我怎样才能更新标记？
标记正在根据数据库数据添加，但我不想要很多标记，我只想要一个标记，每 10 秒更新一次位置。所以之前的标记将被删除，新的标记将被添加。我怎样才能做到这一点？下面是我的代码 -

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">




#map-canvas{
            height: 500px;
        }
    </style>
    <title> Google Map Test</title>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var map;
        //var geocoder = new google.maps.Geocoder();
        //var infowindow = new google.maps.InfoWindow();


function makeRequest(url, callback) {
    var request;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
    } else {
        request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
    }
    request.onreadystatechange = function() {
        console.log(request)
    if (request.readyState == 4 && request.status == 200) {
        callback(request);
    }
}
    request.open("GET", url, true);
request.send();
console.log(request)
              }

        function initialise(){
            var mapOptions = {
                center: new google.maps.LatLng(23.7000, 90.3667),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);    

    makeRequest('get_data.php', function(data) {
    var data = JSON.parse(data.responseText);

    for (var i = 0; i < data.length; i++) {
        displayLocation(data[i]);
    }
         });
    // var myLatLng = {lat: 23.7000, lng: 90.3667};
    //  var marker = new google.maps.Marker({
    //     map: map, 
    //     position: myLatLng,
    //     title: 'test!'
    // });

        }
        setInterval("makeRequest('get_data.php')",10000);

    function displayLocation(location) {

//var content =   '<div class="infoWindow"><strong>'  + location.lat        +'</strong>'
  //              + '<br/>'     + location.lon + '</div>';

console.log(location.lat)
// location = JSON.parse(location)
    var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
    var marker = new google.maps.Marker({
        map: map, 
        position: position,
        title: 'test!'
    });



    // google.maps.event.addListener(marker, 'click', function() {
    //     infoWindow.setContent(content);
    //     infoWindow.open(map,marker);
    // });
}


        </script>


    </head>
    <body>
        <div id="map-canvas"></div>

        <script type="text/javascript">
initialise();
        </script>

    </body>
</html>

get_data.php

    $connection = mysqli_connect("localhost", "root", "123", "gpsdata") or die("Error " . mysqli_error($connection));
    $sql = "select * from locations";
    $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
    $emparray = [];

    while($row = mysqli_fetch_assoc($result)) {
        $emparray[] = $row;
    }

    echo json_encode($emparray);

    mysqli_close($connection);

【问题讨论】：

标签： javascript php mysql google-maps xmlhttprequest

【解决方案1】：

您有两个选择，都涉及在 displayLocation 函数之外保留对标记的引用：

使用引用移动现有标记

var marker;
function displayLocation(location) {
  console.log(location.lat)
    var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
    if (marker && marker.setPosition) {
      // if the marker already exists, move it (set its position)
      marker.setPosition(location);
    } else {
      // create a new marker, keeping a reference
      marker = new google.maps.Marker({
        map: map, 
        position: position,
        title: 'test!'
      });
    }
}

从地图中移除现有标记并创建一个新标记

var marker;
function displayLocation(location) {
  console.log(location.lat)
    var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
    if (marker && marker.setMap) {
      // if the marker already exists, remove it from the map
      marker.setMap(null);
    }
    // create a new marker, keeping a reference
    marker = new google.maps.Marker({
      map: map, 
      position: position,
      title: 'test!'
    });
}

【讨论】：

【解决方案2】：

你应该这样做

map.addMarker(new MarkerOptions()
        .position(new LatLng(parseFloat(location.lat), parseFloat(location.lng)))
        .title("test!"));

在displayLocation函数中

【讨论】：

但我认为这不会删除我以前的标记，对吧？我想做的是只有一个标记，最新的。
那你需要刷新地图。