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

2022-01-15 00:00:00 google-maps xmlhttprequest php javascript mysql

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

I have a gps device which sends data every 10 seconds. I am saving the data (lat, lng) in the MySql database., I am retrieving the data from the DB and putting the markers on those lat lng using xmlHttpRequest(). I am also using setInterval() to xmlHttpRequest on 10 seconds. The markers are being added finely but new markers are added after refresh the whol site, not after 10 seconds on xmlhttpreq.

我还有两个问题 -

  1. 我的 xmlHttpRequest() 在 10 秒后刷新正常，并从 Network、XHR 看到 get_data.php 文件，但它没有在地图上添加新标记，但 10 秒后请求 xmlHttp.我怎样才能更新标记?

  1. My xmlHttpRequest() is refreshing fine after 10 seconds and getting the get_data.php file as i am seeing from Network,XHR but it is not adding new marker on the map, but the xmlHttp is requested after 10 seconds. How can i also update the marker?

正在根据数据库数据添加标记，但我不想要很多标记，我只想要一个每 10 秒更新一次位置的标记.所以之前的标记将被删除，新的标记将被添加.我怎样才能做到这一点?下面是我的代码 -

Markers are being added according to the DB data but i do not want many markers, i just want one marker which will be updated position every 10 seconds. So the previous marker will be deleted and the new marker will be added. How can i do that? Below is my code -

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

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

推荐答案

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

You have two options, both involve keeping a reference to the marker outside of the displayLocation function:

  1. 使用引用移动现有标记

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!'
      });
    }
}

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

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!'
    });
}

相关文章