Question

我有一个gps设备，每隔10秒发送一次数据。我正在MySql数据库中保存数据（lat，lng）。我正在从DB中检索数据并使用xmlHttpRequest（）将标记放在那些lat lng上。我也在10秒内使用setInterval（）到xmlHttpRequest。标记正在精细添加，但刷新whol网站后添加新标记，而不是在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

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

Answer 2

你应该做

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

在displayLocation函数

中

删除上一个标记并在更新的lat lng中添加标记

2 个答案: