Javascript 删除以前的标记，并在更新的lat lng中添加标记_Javascript_Php_Mysql_Google Maps_Xmlhttprequest

Javascript 删除以前的标记，并在更新的lat lng中添加标记

javascript php mysql google-maps

Javascript 删除以前的标记，并在更新的lat lng中添加标记,javascript,php,mysql,google-maps,xmlhttprequest,Javascript,Php,Mysql,Google Maps,Xmlhttprequest,我有一个gps设备，每10秒发送一次数据。我将数据（lat，lng）保存在MySql数据库中，从数据库中检索数据，并使用xmlHttpRequest（）将标记放在这些lat lng上。我还使用setInterval（）在10秒钟内执行xmlHttpRequest。标记被精细地添加，但新标记是在刷新整个站点之后添加的，而不是在xmlhttpreq上10秒之后我还有两个问题- 我的xmlHttpRequest（）在10秒后刷新良好，并从网络中看到get_data.php文件，XHR，但它没有在地图

我有一个gps设备，每10秒发送一次数据。我将数据（lat，lng）保存在MySql数据库中，从数据库中检索数据，并使用xmlHttpRequest（）将标记放在这些lat lng上。我还使用setInterval（）在10秒钟内执行xmlHttpRequest。标记被精细地添加，但新标记是在刷新整个站点之后添加的，而不是在xmlhttpreq上10秒之后

我还有两个问题-

我的xmlHttpRequest（）在10秒后刷新良好，并从网络中看到get_data.php文件，XHR，但它没有在地图上添加新标记，但xmlHttp在10秒后被请求。如何更新标记

正在根据DB数据添加标记，但我不想要很多标记，我只想要一个标记，它将每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>

你应该这样做

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

在displayLocation功能中，您有两个选项，这两个选项都涉及将对标记的引用保留在<代码>displayLocation功能之外：

使用参照移动现有标记

从地图中删除现有标记并创建新标记

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

map.addMarker(new MarkerOptions()
        .position(new LatLng(parseFloat(location.lat), parseFloat(location.lng)))
        .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.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!'
    });
}