javascript 谷歌地图 - 地图重新加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28345745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps - Map reload
提问by Dancer
I have the following code setup to apply a map for a variety of areas
我有以下代码设置来为各种区域应用地图
var locations = [
['Liver Office - Liverpool Office', 53.40529, -2.988801, 1],
['Lond office - London Office', 51.515026, -0.086811, 2],
];
function plotMap(loc) {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng((locations[loc][1]), (locations[loc][2])),
stylers: [
{ saturation: -100 } // <-- THIS
]
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
},
icon: 'marketICO.png',
title: (locations[loc][0])
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infowindow.setContent(locations[loc][0]);
infowindow.open(map, marker);
}
})(marker, loc));
}
$('.livLink').click(function(){
plotMap(0);
});
$('.lonLink').click(function(){
plotMap(1);
});
plotMap(0);
Regarding reloading the map - at the moment the above script is triggered by 2 tab buttons - if a map is loaded and the second button is clicked the script re-runs and replaces the existing map - I'm just thinking of memory issues - should the initial map instance be stopped before loading a second?
关于重新加载地图 - 目前上述脚本由 2 个选项卡按钮触发 - 如果加载地图并单击第二个按钮，脚本将重新运行并替换现有地图 - 我只是在考虑内存问题 - 应该在加载第二个之前停止初始地图实例？
回答by MrUpsidown
You can create 2 map instances (map1and map2for example).
您可以创建2个地图实例（map1和map2举例）。
Initialize both maps on document ready (or another event) and trigger a map resize when changing tabs.
在文档准备好（或其他事件）时初始化两个地图，并在更改选项卡时触发地图大小调整。
google.maps.event.trigger(map, 'resize');
google.maps.event.trigger(map, 'resize');
Replace mapby the appropriate map object (corresponding to the map on the tab you show).
替换map为适当的地图对象（对应于您显示的选项卡上的地图）。
回答by Dr.Molle
When you think about memory issues(and also when not) it's better to re-use the Map-instance(see: Bug: Destroying Google Map Instance Never Frees Memory)
当您考虑内存问题时（以及不考虑时），最好重新使用 Map-instance（请参阅： Bug: Destroying Google Map Instance Never Frees Memory）
function plotMap(loc) {
var map_container = document.getElementById('map');
if (!map_container.map) {
map_container.map = new google.maps.Map(map_container,
{
stylers: [{
saturation: -100
}
]
});
map_container.marker = new google.maps.Marker();
map_container.infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map_container.marker, 'click', function () {
map_container.infowindow.close();
map_container.infowindow.open(this.getMap(), this);
});
map_container.infowindow.bindTo('content', map_container.marker, 'content');
}
map_container.infowindow.close();
map_container.map.setOptions({
zoom: 17,
center: new google.maps.LatLng((locations[loc][1]), (locations[loc][2]))
});
//icon: 'marketICO.png',
map_container.marker.setOptions({
position: map_container.map.getCenter(),
map: map_container.map,
content: locations[loc][0],
title: locations[loc][0]
});
}
