我创建了一个文件，用于将标记加载到 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
TA贡献1820条经验 获得超9个赞
创建一个执行 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);
- 1 回答
- 0 关注
- 132 浏览
添加回答
举报
0/150
提交
取消