我一直在关注谷歌网站上关于如何使用 MySQL 数据正确实现谷歌地图的教程。一切正常,但获取 map 上最新标记的唯一方法是刷新页面。我尝试将 SetInterval 添加到整个函数中,这确实有效。然而,每次循环时,整个 map 都会刷新。如果您在 map 上移动,然后它会在您身上重置,这会特别烦人。有什么办法可以只刷新标记吗?按照我的理解,每次循环都必须从 MySQL 中提取最新数据。这是我的代码:
<div class="container">
<h3>Location of Devices</h3>
<div id="map">
</div>
</div>
<script>
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(XX.XXXX, XX.XXXX),
zoom: 17
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('http://XXXXX.com/XXXXXXX.php/', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('id');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
})
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
我尝试将 setInterval() 添加到 initMap() 和 downloadUrl() 中。我不想将 Interval 添加到 initMap() 中,除非有办法使代码不会一遍又一遍地刷新整个 map 。有什么办法可以实现这一点吗?
最佳答案
这是我的建议:
- 创建一个名为
marker
的全局变量,并在initMap
函数中对其进行初始化。 - 每当位置发生变化时,请使用
marker.setPosition(new google.maps.LatLng(/*put the lat*/,/*put the lng*/))
函数将标记设置为其位置新的位置。
这样您就不会一遍又一遍地重新创建标记。
希望有帮助!
关于javascript - 实时更新 Google map 标记,无需刷新整个 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45662879/