我尝试在单个页面上加载多个谷歌地图，但页面加载时间非常长。如何加快页面加载时间？
我的示例 html 代码如下。实际上，下面的 Google map 是循环创建的，其数量至少为 100。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<div id="postid_78" style="width:600px;height:150px;">
<script>
var mapProp = {
center: new google.maps.LatLng('42.5000', '1.5000'),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("postid_78"), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng('42.5000', '1.5000'),
map: map
});
</script>
</div>
<hr />
<div id="postid_77" style="width:600px;height:150px;">
<script>
var mapProp = {
center: new google.maps.LatLng('42.5000', '1.5000'),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("postid_77"), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng('42.5000', '1.5000'),
map: map
});
</script>
</div>
<hr />
<div id="postid_76" style="width:600px;height:150px;">
<script>
var mapProp = {
center: new google.maps.LatLng('42.5000', '1.5000'),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("postid_76"), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng('42.5000', '1.5000'),
map: map
});
</script>
</div>
<hr />
<div id="postid_75" style="width:600px;height:150px;">
<script>
var mapProp = {
center: new google.maps.LatLng('42.5000', '1.5000'),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("postid_75"), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng('42.5000', '1.5000'),
map: map
});
</script>
</div>
<hr />
<div id="postid_74" style="width:600px;height:150px;">
<script>
var mapProp = {
center: new google.maps.LatLng('42.5000', '1.5000'),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("postid_74"), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng('42.5000', '1.5000'),
map: map
});
</script>
</div>
<hr />
<div id="postid_73" style="width:600px;height:150px;">
<script>
var mapProp = {
center: new google.maps.LatLng('42.5000', '1.5000'),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("postid_73"), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng('42.5000', '1.5000'),
map: map
});
</script>
</div>
</body>
</html>
最佳答案
要提高页面加载速度，您可以(必须)做几件事。
- 加载 API 异步 DOCUMENTATION HERE
- 仅本地图在视口(viewport)中可见时才初始化 map 因此您可以使用插件 LIKE THIS
- 同时将 JS 脚本始终放在 body 标记的底部。 因此所有内容都会被加载，并且没有 JavaScript 会拒绝内容加载
这确实会增加页面负载。我已经在几个项目中这样做了，效果很好!
关于javascript - 在单个页面上加载多个谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25900309/