Question

第一次加载页面时，我的代码正常工作，但是我想通过从文本文件中读取坐标而不是一次又一次地加载地图来更新标记位置。我使用了名为setInterval(myFunction, 10000);的函数，但它对我不起作用。它会一次又一次地加载地图，并且在几次更新后也会减速。

我的问题是我希望在网页上进行实时位置更新，因为Arduino GPS Tracker会在文本文件中更新服务器上的坐标，即dob.txt文件内容为33.729388199999995, 75.0931461。这些坐标将在几秒钟内更新，并且需要在地图中显示而无需再次加载地图。这是我的代码：

    <!DOCTYPE html>
<html>
<head>
<style>
  html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var im = 'http://images.clipartpanda.com/google-location-icon-Location_marker_pin_map_gps.png';

var image = new google.maps.MarkerImage('http://www.google.com/mapfiles/markerA.png',
    new google.maps.Size(20, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
    new google.maps.Size(37, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));



loadFile('dob.txt');

function loadFile(uri) {
    r = new XMLHttpRequest();
    r.open('GET', uri, true);
    r.onreadystatechange = function() {
        if (r.readyState == 4) {
            lines = r.responseText.split("\n");
            if (lines) {

                initialize(lines);
            }
        }
    }
    r.send(null);
    setInterval(loadFile, 5000);
} //loadFile Ends here



function initialize() {

    // Create the map.

    for (var i = 0; i < lines.length; i++) {
        segments = lines[0].split(',');
        lat = segments[0];
        lng = segments[1];


    } // for loop Ends


    point = new google.maps.LatLng(lat, lng);

    mapOptionss = {
        zoom: 16,
        center: point,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptionss);



    //Marker Starts
    marker = new google.maps.Marker({
        position: point, //new google.maps.LatLng(33.729388199999995, 75.0931461),
        map: map,
        draggable: true,
        shadow: shadow,
        icon: image,
        title: "My place"

    });
    //Marker Ends here

    marker.setMap(map);


}; //initialize method End

function setTime() {

    setInterval(loadFile, 1000); //setInterval End

}

function setUpdate() {

    ln = r.responseText.split("\n");
    for (var a = 0; a < ln.length; a++) {
        var data = ln[a].split(',');
        var latt = data[0];
        var lngg = data[1];
    }
    marker.setPosition(new google.maps.LatLng(latt, lngg));
    map.panTo(new google.maps.LatLng(latt, lngg));
    marker.setMap(map);
    setInterval(setUpdate, 1000);

}
</script> 
</head>
<body onload="initialize()">
<div id="map-canvas" ></div>
</body>
</html>

Answer 1

一种方法：

1 - 当您创建标记时，将它们存储在数组中

  var marker = new google.maps.Marker( ... );    
  markers.push( marker );

2 - 如果要刷新，请使用数组删除以前的标记

function deleteMarkers() {
     markers.forEach( function ( marker ) {
       marker.setMap( null );
     } ); 
     markers = [];
}

顺便说一句，我想你忘了宣布你的marker变量。

实时更新标记而不加载网页从文本文件谷歌地图Api加载更新的坐标

1 个答案: