删除之前的标记并在更新的经纬度中添加标记

Question

我有一个 GPS 设备，每 10 秒发送一次数据。我正在 MySql 数据库中保存数据（经纬度）。我正在从数据库中检索数据并使用 xmlHttpRequest() 将标记放在那些经纬度上。我还在 10 秒内使用 setInterval() 到 xmlHttpRequest。正在精细地添加标记，但在刷新整个站点后添加新标记，而不是在 xmlhttpreq 上 10 秒后添加。

我还有两个问题 -

我的 xmlHttpRequest() 在 10 秒后刷新正常并获得 get_data.php 文件，正如我从网络看到的那样，XHR 但它没有在地图上添加新标记，但是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);

Answer 1

你应该做

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

在 displayLocation 函数中

Answer 2

您有两个选择，都涉及在 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!'
    });
}

删除之前的标记并在更新的经纬度中添加标记

Remove the previous marker and add marker in the updated lat lng

javascript

php

mysql

google-maps

xmlhttprequest