大量的GOOGLE地图。 5000个地方，5MB。如何让它更快？ [英] MASSIVE GOOGLE MAPS. 5000 places, 5MB. How to make it faster?
问题描述
我试图加载显示5000个可点击的标记的Google地图v3。我的JS每个地方包含10行：
var myLatlng_4821 = new google.maps.LatLng（43.0754329，-71.4699752）;
var contentString_4821 =< b>放置1< / b>;
var infowindow_4821 = new google.maps.InfoWindow（{content：contentString_4821}）;
var marker_4821 = new google.maps.Marker（{
position：myLatlng_4821，
map：map，
icon：image
}）;
google.maps.event.addListener（marker_4821，'click'，function（）{
infowindow_4821.open（map，marker_4821）;
}）;
所以它给了我50000行js（5MB）。我很想缓存它，但是heroku不允许页面加载超过30秒，所以我甚至无法缓存一次。
你会有任何诀窍加载此页面更快？我只设法在本地做（需要45s〜）。我没有别的东西要加载。我使用RoR。
非常感谢！
解决方案（非常酷） strong>
var myLatlng = [];
var infowindow = [];
var marker = [];
函数MakeInfoWindowEvent（map，infowindow，marker）{
return function（）{
infowindow.open（map，marker）;
};
}
for（var i = 0; i< places.length; i ++）
{
myLatlng [i] = new google。 maps.LatLng（地方[I] [0]，则以[I] [1]）;
infowindow [i] = new google.maps.InfoWindow（{
content：places [i] [2]
}）;
marker [i] = new google.maps.Marker（{
position：myLatlng [i]，
map：map
}）;
google.maps.event.addListener（marker [i]，'click'，MakeInfoWindowEvent（map，infowindow [i]，marker [i]））
} $如果我正确地理解了你的话，你就会知道你的意思。是否有示例代码重复5000次，'4821'，经纬度和内容字符串对于5000个标记中的每一个都是不同的？如果是这样，那么您需要改变你的方法，使其重复的数据，而不是代码...
var markers = [
[43.0754329，-71.4699752，第一个标记的信息]，
[45.0473490，-56.47688356，第二个标记的信息]，
。
。
。
[20.1234384,12.23462566，最后一个标记的信息]
]; （标记[i] [0]，标记[i] [1]）的
（var i = 0; i< markers.length; i ++）{
var latLng = new google.maps.LatLng ）;
var contentString = markers [i] [2];
var infowindow = new google.maps.InfoWindow（{content：contentString}）;
var marker = new google.maps.Marker（{
position：latlng，
map：map，
icon：image
}）;
google.maps.event.addListener（marker，'click'，function（）
{
infowindow.open（map，marker）;
}）;
}
这样会大大减少页面的大小，解决缓存问题。
尽管有一个警告 - 上面的代码只是说明如何删除重复的代码并将其替换为数据查找，但可能存在问题一次创建如此多的InfoWindow实例（您最好在侦听器中创建InfoWindow
另外，我并不完全确定闭包中变量的可见性，所以最终可能会产生5000个标记具有列表中最后一项的属性（可能需要稍微更改）
I'm trying to load a Google Maps v3 that shows 5000 markers clickable. My JS contains 10 lines per place:
var myLatlng_4821 = new google.maps.LatLng(43.0754329,-71.4699752);
var contentString_4821 = "<b>Place 1</b>";
var infowindow_4821 = new google.maps.InfoWindow({content: contentString_4821});
var marker_4821 = new google.maps.Marker({
position: myLatlng_4821,
map: map,
icon: image
});
google.maps.event.addListener(marker_4821, 'click', function() {
infowindow_4821.open(map,marker_4821);
});
So it gives me a 50 000 lines js (5MB). I would love to cache it but heroku doesn't allow a page to take more than 30s to load so I can't even cache it once.
Would you have any tricks to load this page faster? I only managed to do it locally (takes 45s~). I have nothing else to load. I use RoR.
Thanks a lot!
SOLUTION (it's pretty cool).
var myLatlng = [];
var infowindow = [];
var marker = [];
function MakeInfoWindowEvent(map, infowindow, marker) {
return function() {
infowindow.open(map, marker);
};
}
for (var i=0;i < places.length;i++)
{
myLatlng[i] = new google.maps.LatLng(places[i][0],places[i][1]);
infowindow[i] = new google.maps.InfoWindow({
content: places[i][2]
});
marker[i] = new google.maps.Marker({
position: myLatlng[i],
map: map
});
google.maps.event.addListener(marker[i], 'click', MakeInfoWindowEvent(map, infowindow[i], marker[i]))
}
}
解决方案 If I understand you correctly, you have the example code repeated 5000 times, with '4821', the lat&lng and the content string differing for each of the 5000 markers?
If so, then you need to change your approach so that its the data that is 'repeated' and not the code...
var markers = [
[43.0754329,-71.4699752,"Info for first marker"],
[45.0473490,-56.47688356,"Info for second marker"],
.
.
.
[20.1234384,12.23462566,"Info for last marker"]
];
for(var i=0; i < markers.length; i++){
var latLng = new google.maps.LatLng(markers[i][0], markers[i][1]);
var contentString = markers[i][2];
var infowindow = new google.maps.InfoWindow({content: contentString});
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map,marker);
});
}
This would reduce the size of your page by a significant amount, and will probably solve the caching issue.
A word of warning though - the above code merely illustrates how to remove the repeated code and replace it with data lookup, but there may be issues with creating so many InfoWindow instances at once (You would probably be better off creating the InfoWindow inside the listener.
Also, I'm not completely sure about the visiblity of variables in the closures, so you may end up with 5000 markers having the attributes of the last item in the list (slight changes may be required)
这篇关于大量的GOOGLE地图。 5000个地方，5MB。如何让它更快？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
