当我第一次加载页面时，我的代码正在工作，但我想通过从文本文件读取坐标来更新标记位置，而无需一次又一次加载 map 。我已经使用了名为 setInterval(myFunction, 10000); 的函数但这对我不起作用。它一次又一次地加载 map ，并且在几次更新后也会变慢。
我的问题是我想要网页上的实时位置更新，因为 Arduino GPS Tracker 将在文本文件中更新服务器上的坐标，即 dob.txt文件内容为33.729388199999995, 75.0931461 。这些坐标将在几秒钟内更新，并且需要在 map 中显示而无需再次加载 map 。
这是我的代码:
<!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>
最佳答案
一种方法:
1 - 创建标记时，将它们存储在数组中
var marker = new google.maps.Marker( ... );
markers.push( marker );
2 - 当要刷新时，使用数组删除之前的标记
function deleteMarkers() {
markers.forEach( function ( marker ) {
marker.setMap( null );
} );
markers = [];
}
顺便说一句，我认为您忘记声明您的 marker 变量。
关于javascript - 实时更新标记，无需加载网页，从文本文件加载更新的坐标 Google map Api，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35255164/