创建加载标记的函数，以便可以使用 setInterval 调用它来更新 XML 的位置
我创建了一个文件，用于将标记加载到 Google Maps JavaScript API 画布中。标记是从 XML 文件生成的，该文件从 SQL 获取标记信息。
我希望能够调用函数 ex。loadMarkers() 以便我可以在 SQL 数据更改时更新标记位置。
截至目前，我可以再次调用 load()，但随后它会刷新整个地图，而不仅仅是标记。就像网站的硬刷新一样..
如何包装仅用于插入标记的代码，以便我可以将其作为函数调用？
<!DOCTYPE html >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var customIcons = {
user: {
icon: 'http://maps.google.com/mapfiles/kml/shapes/man.png'
},
store: {
icon: 'http://maps.google.com/mapfiles/kml/shapes/grocery.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(59.914045, 10.756808),
zoom: 12,
mapTypeId: 'roadmap',
mapTypeControl: false,
streetViewControl: false,
zoomControl: false,
fullscreenControl: false
});
郎朗坤1回答
-
慕妹3146593
创建一个执行 downloadUrl 调用的函数 ( setMarkers) 以加载 XML 并在地图上创建标记。使地图变量成为全局变量或将其传递给该函数创建一个全局数组来跟踪这些标记，以便您可以在加载新标记之前删除它们。var gmarkers = [];function setMarkers() { downloadUrl(urlString, function(data) { var xml = data.responseXML; for (var i=0; i<gmarkers.length; i++) gmarkers[i].setMap(null); gmarkers = []; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b>"; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, draggable: false, animation: google.maps.Animation.DROP, }); gmarkers.push(marker); } // for each markers }); //download url}在函数load和setTimeout.var map;function load() { map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(59.914045, 10.756808), zoom: 12, mapTypeId: 'roadmap', mapTypeControl: false, streetViewControl: false, zoomControl: false, fullscreenControl: false }); setMarkers();} // load();setInterval(function() { setMarkers();},3000);
随时随地看视频慕课网APP
PHP