更新打开的谷歌地图信息窗口
Update open google maps Infowindow
我在玩从公交车追踪器网站获取json信息,并用谷歌地图滚动自己的信息,显然没有那么漂亮。目前,我不知道如何在信息窗口打开时更新它。我找到了一些例子,但似乎没有什么能满足我的要求。我设法让标记在每次"更新"时更新和移动,但信息窗口并没有达到我想要的效果。我希望能够点击一个标记并将其列出,比如信息窗口中的车速。当窗口仍然打开并且json更新/下载时,标记将移动,我希望窗口的内容也能以新的速度更新。这就是让一个打开的信息窗口在不关闭的情况下更新其内容
额外的好处:我们的目标是让runbuses()函数通过复选框来打开和关闭。因此,当取消选中时,它将停止下载新的json。我也不知道该怎么做。哈哈
无论如何,在尝试学习一点java的同时,这很有趣。谢谢
function runbuses() {
setInterval(function() {
loadbus(map)
}, 5000);
}
function loadbus(map) {
//howardshuttle.com
$.ajax({
url: "http://www.howardshuttle.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
data: 'ApiKey=8882812681',
dataType: 'jsonp',
jsonp: 'method',
async: false,
cache: false,
success: function(obj) {
for (var i = 0; i < obj.length; i++) {
var image = {
url: setumicon(obj[i]['Heading']),
anchor: new google.maps.Point(20, 20),
scaledSize: new google.maps.Size(40, 40)
}
console.log(obj[i].Name);
//Do we have this marker already?
if (umbuses.hasOwnProperty(obj[i].Name)) {
umbuses[obj[i].Name].setPosition(new google.maps.LatLng(obj[i].Latitude, obj[i].Longitude));
umbuses[obj[i].Name].setIcon(image);
// How do i update the info window that is open?
console.log(Math.round(obj[i]['GroundSpeed']));
console.log('has prop');
} else {
var hover = obj[i].Name;
console.log('new');
var image = {
url: setumicon(obj[i].Heading),
anchor: new google.maps.Point(20, 20),
scaledSize: new google.maps.Size(40, 40)
}
marker = new google.maps.Marker({
position: new google.maps.LatLng(obj[i].Latitude, obj[i].Longitude),
map: map,
icon: image,
title: String(hover)
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
if (activeInfoWindow != null) activeInfoWindow.close();
uminfo.setContent("<p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" +
"Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p>");
uminfo.open(map, marker);
activeInfoWindow = uminfo;
}
})(marker, i));
umbuses[obj[i].Name] = marker;
console.log(umbuses);
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("some error");
}
});
}
如果您想更改打开的InfoWindow的内容,请为其中的HTML元素指定要更改id的内容,并使用HTML DOM操作来更改它。
uminfo.setContent("<div id='infowin'><p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" +
"Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p></div>");
然后,如果InfoWindow是打开的,这应该会起作用:
document.getElementById('infowin').innerHTML = "<p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" +
"Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p>";
代码片段:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
var infowindow = new google.maps.InfoWindow({
content: "<div id='infowin'>original content</div>"
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.open(map, marker);
})
google.maps.event.trigger(marker, 'click');
setInterval(function() {
marker.setPosition(google.maps.geometry.spherical.computeOffset(marker.getPosition(), 100, 90));
document.getElementById('infowin').innerHTML = "<b>Time</b>:" + Date() + "<br>" + marker.getPosition().toUrlValue(6);
}, 5000);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 定义完全独立的样式信息
- 使用html2canvas获取基本信息
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 从信息框调用弹出图像库
- 如何在不传递此信息的情况下查找被调用的元素
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- 如何通过解析类信息来使用jQuery创建类
- 包含数据库中相关信息的开放模态
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- ng在更新$scope后重复不更新信息
- 谷歌地图点击潜水触发信息窗口
- 根据CHECKBOX输入值动态更新DIV信息
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- Jquery on单击“显示信息”
- 将FlowPlayer嵌入谷歌地图信息窗口
- AEM(cq5)使用组件内的信息
- 如何在完整日历中的当天点击时显示活动详细信息
- 使用javascript后台脚本获取Yotutube频道信息