gpt4 book ai didi

javascript - 在单个页面上加载多个谷歌地图

转载 作者:行者123 更新时间:2023-11-28 00:58:48 24 4
gpt4 key购买 nike

我尝试在单个页面上加载多个谷歌地图,但页面加载时间非常长。如何加快页面加载时间?

我的示例 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>

最佳答案

要提高页面加载速度,您可以(必须)做几件事。

  1. 加载 API 异步 DOCUMENTATION HERE
  2. 仅本地图在视口(viewport)中可见时才初始化 map 因此您可以使用插件 LIKE THIS
  3. 同时将 JS 脚本始终放在 body 标记的底部。因此所有内容都会被加载,并且没有 JavaScript 会拒绝内容加载

这确实会增加页面负载。我已经在几个项目中这样做了,效果很好!

关于javascript - 在单个页面上加载多个谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25900309/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com