详细信息
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
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。