admin管理员组文章数量:1330156
In my Rails app, the background consists of a fullscreen div with Google Maps and a traffic layer. This is what gets called on page load:
$(function () {
updateMap();
});
The updateMap function creates a Google Map on the div element '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);
}
The last call is to this function:
function updateTrafficOnMap(map, overlay)
{
overlay.setMap();
overlay = null;
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
setTimeout(function(){ updateTrafficOnMap(map, trafficLayer) }, 60000);
}
Which is supposed to update the traffic layer every minute.
Now the div is loaded correctly on page load, the layer is loaded too. However, this never updates, so there's no real time traffic information unless you reload the whole page.
Anyone knows the magic word to make the traffic layer refresh properly?
In my Rails app, the background consists of a fullscreen div with Google Maps and a traffic layer. This is what gets called on page load:
$(function () {
updateMap();
});
The updateMap function creates a Google Map on the div element '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);
}
The last call is to this function:
function updateTrafficOnMap(map, overlay)
{
overlay.setMap();
overlay = null;
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
setTimeout(function(){ updateTrafficOnMap(map, trafficLayer) }, 60000);
}
Which is supposed to update the traffic layer every minute.
Now the div is loaded correctly on page load, the layer is loaded too. However, this never updates, so there's no real time traffic information unless you reload the whole page.
Anyone knows the magic word to make the traffic layer refresh properly?
Share Improve this question asked Oct 5, 2011 at 9:16 HTBRHTBR 1,0231 gold badge10 silver badges22 bronze badges 2- Shouldn't it be overlay.setMap(null); – duncan Commented Oct 5, 2011 at 14:21
- @duncan that amounts to the same thing. However, I got a solution myself. See below. – HTBR Commented Oct 29, 2011 at 15:21
3 Answers
Reset to default 4So I found the answer. Apparently you cannot update the map with a new overlay while inside the timeOut function. I do not know why exactly (as for instance a 'alert()' does show while inside the function). I solved it using a switch statement in the updateOnTrafficMap function, so that once every minute the layout disappears, and immediately reappears using another timeOut (set to 1 ms).
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)
}
}
On document load you call the updateMap() function, and you should have a DIV with id "google_map" to display the map in of course.
This worked for me:
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);
}
A setInterval over the whole initialize routine got me the refreshing that I desired. options.ts_google_map_traffic_refresh_milliseconds is set to the milliseconds you desire.
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
本文标签: javascriptGoogle Maps refresh traffic layerStack Overflow
版权声明:本文标题:javascript - Google Maps refresh traffic layer - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742217658a2434864.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论