在我的Rails应用程序中,背景由一个带有Google Maps的全屏div和一个交通层组成。这是在页面加载时调用的:
$(function () {
updateMap();
});
updateMap函数在div元素'google_map'上创建一个谷歌地图:
function updateMap() {
var latlng = new google.maps.LatLng(52.157927, 4.704895);
var myOptions = {
zoom: 10,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("google_map"),
myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
updateTrafficOnMap(map, trafficLayer);
}
最后一个调用是这个函数:
function updateTrafficOnMap(map, overlay)
{
overlay.setMap();
overlay = null;
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
setTimeout(function(){ updateTrafficOnMap(map, trafficLayer) }, 60000);
}
它应该每分钟更新一次交通层
现在div在页面加载时被正确加载,图层也被加载。然而,这永远不会更新,所以没有实时的交通信息,除非你重新加载整个页面。
有谁知道使流量层正确刷新的神奇词吗?
我找到了答案。显然,您不能在timeOut函数中使用新的覆盖来更新地图。我不知道为什么(例如,一个'alert()'确实显示,而在函数内部)。我使用updateOnTrafficMap函数中的开关语句解决了这个问题,这样每分钟一次布局消失,并立即使用另一个timeOut(设置为1毫秒)重新出现。
function updateMap() {
// the following creates a Google Map with zoom level 10 and the LatLong coordinates
// stated below
var latlng = new google.maps.LatLng(52.053335, 4.917755);
var myOptions = {
zoom: 10,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("google_map"), myOptions);
updateTrafficOnMap(map, null, 1);
}
function updateTrafficOnMap(map, trafficLayer, on)
{
if(on == 0) {
trafficLayer.setMap(null);
setTimeout(function() { updateTrafficOnMap(map, null, 1) }, 1)
}
if(on == 1) {
var trafficLayer2 = new google.maps.TrafficLayer();
trafficLayer2.setMap(map);
// after 300ms (or 5 minutes) update the traffic map
setTimeout(function() { updateTrafficOnMap(map, trafficLayer2, 0)}, 300000)
}
}
在文档加载时调用updateMap()函数,并且您应该有一个id为"google_map"的DIV来显示地图。
这对我有用:
var _mainMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var _gmapTrLayer = new google.maps.TrafficLayer();
_gmapTrLayer.setMap(_mainMap);
setInterval(refreshGmapsTrafficLayer, 60000); // runs every minute
function refreshGmapsTrafficLayer() {
_gmapTrLayer.setMap(null);
_gmapTrLayer.setMap(_mainMap);
}
在整个初始化例程上使用setInterval可以获得我想要的刷新效果。选项。Ts_google_map_traffic_refresh_milliseconds设置为所需的毫秒数。
setInterval(_ts_map_initialize, options.ts_google_map_traffic_refresh_milliseconds);
function _ts_map_initialize(){
console.log('function _ts_map_initialize()')
var myLatlng = new google.maps.LatLng(options.ts_google_map_traffic_latHome,options.ts_google_map_traffic_lonHome);
var myOptions = {
zoom: ts_int_zoomLevel,
center: myLatlng,
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:[{
featureType:"poi",
elementType:"labels",
stylers:[{
visibility:"off"
}]
}]
}
map = new google.maps.Map(document.getElementById('ts_google_map_traffic_canvas'), myOptions);
defaultBounds = map.getBounds();
trafficLayer = new google.maps.TrafficLayer(); //add the layer - don't view it unless user toggles button
trafficLayer.setMap(map);
}
enter code here