标记的实时更新，无需加载页面谷歌地图API V3
Real-Time update of markers without loading the page Google Maps API V3
我使用谷歌地图API V3标记php/sql。我的问题是，我希望根据存储在sqldb中的数据实时更新标记，因为我的capstone项目的应急响应系统需要它。但我看到2或3个线程有同样的问题，但当我尝试使用那里的代码时，什么都没有发生。请有人告诉我该怎么做。我已经连续做了一天了，但什么都没发生。
我想要实现的就是这个。
这是我的密码。
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png'
},
bar: {
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP fil
downloadUrl("poy.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
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> <br/>" + address + "<br/>" + point;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
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>
</head>
<body onload="load()">
<div id="map" style="width: 700px; height: 500px"></div>
</body>
</html>
这是未经测试的，但您应该了解这个想法。在load()函数中，设置触发下载的间隔。
var map, infoWindow, intervalId;
var customIcons = {
restaurant: {
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png'
},
bar: {
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'
}
};
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
infoWindow = new google.maps.InfoWindow;
// Trigger downloadUrl at an interval
intervalId = setInterval(triggerDownload, 5000);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function triggerDownload() {
// Change this depending on the name of your PHP file
downloadUrl("poy.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
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> <br/>" + address + "<br/>" + point;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
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() {}
这将每5秒（5000毫秒）下载一次XML。
如果你想停止这个过程，你可以打电话给
clearInterval(intervalId);
警告：您正在使用异步的XMLHttpRequest。这意味着您可以在downloadUrl完成前一个请求之前调用它，这可能会导致不必要的行为。
这段代码非常适合我：
<script type="text/javascript">
//<![CDATA[
var map, infoWindow, intervalId;
var customIcons = {
restaurant: {
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png'
},
bar: {
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'
}
};
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
infoWindow = new google.maps.InfoWindow;
// Trigger downloadUrl at an interval
intervalId = setInterval(triggerDownload, 1000);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
var markersArray = [];
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
}
function triggerDownload() {
clearOverlays();
// Change this depending on the name of your PHP file
downloadUrl("poy.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
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> <br/>" + address + "<br/>" + point;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
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>
相关文章：
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 标记的实时更新，无需加载页面谷歌地图API V3
- 覆盖在赢得'不允许点击下面的标记，谷歌地图api v3
- 谷歌地图Api和JS代码不工作
- 谷歌地图API-InfoBubble赢得't关闭-关闭(）不会'不起作用
- 如何在多承诺链中处理谷歌地图API V3事件
- 谷歌地图api和gMapsLatLonPicker
- 谷歌地图API-“;toGeoJson”;返回几何体为null的对象
- 谷歌地图API v3:Initial View is Fine，but Gray Box with No Map if
- 为什么谷歌地图API's方法未从RequireJS中正确调用
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 使用谷歌地图API和phonegap显示当前位置+方向
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市）
- 谷歌地图API标记没有标记我的位置
- 使用谷歌地图api 3为MapTypeId.TERRAIN分离按钮
- 在JQuery中使用谷歌地图Api事件/侦听器
- 在Ionic应用程序上使用$.getScript加载谷歌地图Api
- 我该如何解决“;未捕获引用错误:谷歌没有定义"?(谷歌地图API）
- 谷歌地图API-显示具有不同图标的标记
- 如何停止地图移动时，鼠标悬停在标记在谷歌地图API 3
