使用 jQuery 延迟加载 Google Maps API - lazymap.js

使用 jQuery 延迟加载 Google Maps API - lazymap.js

版本:

浏览量:1208

最后更新:2021-09-12

应用标签:MAC 软件gitJquery插件

推荐指数:

详细信息

lazy map .js 是一个小型且可配置的 jQuery 插件,用于延迟加载 Google 地图以提高您的博客或网站的性能。该插件会延迟Google Maps JavaScript API的加载,直到将地图包装器滚动到视图中。

如何使用它:

1. 创建一个容器来放置嵌入的谷歌地图并在data属性中指定纬度、经度和缩放级别

<div class="map" 
     data-locations="[lat1-1,lng1-2], [lat2-1,lng2-2]"
     data-zoom="8">
</div>

2. 在 jQuery 之后但在结束 body 标签之前加载 jQuery lazymap.js 脚本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
</script>
<script src="jquery.lazymap.js"></script>

3. 初始化插件并插入您自己的 Google Maps API 密钥。在此处获取API 密钥

$(function(){
  $('.map').lazymap({
    apiKey: 'YOUR API KEY HERE'
  });
});

4. 以英语以外的语言显示谷歌地图。

$(function(){
  $('.map').lazymap({
    apiKey: 'YOUR API KEY HERE',
    culture: 'fr'
  });
});

5. 覆盖默认属性。

$(function(){
  $('.map').lazymap({
    zoomAttr: 'data-zoom',
    locationAttr: 'data-locations',
    keepAttributes: ['class']
  });
});

变更日志:

2019-06-18

  • 删除了 latitudeAttr 和 longitudeAttr,添加了带有逻辑的数据位置,以将多个标记添加到同一地图

2019-03-22

  • 修正了一个错字错误

2019-03-18

  • v0.1.1

联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。