前端学习－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

最新推荐文章于 2021-06-22 11:30:23 发布

weixin_30394333

最新推荐文章于 2021-06-22 11:30:23 发布

阅读量683

点赞数 1

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/MianShan/p/6172137.html

版权

介绍：Leaflet是一个开源的JavaScript库，对移动端友好且对地图有很好的交互性。大小仅仅只有 33 KB，同时具有大多数地图所需要的特点。

Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性。它在桌面端和移动端都工作的相当高效，并有大量的插件用于扩张Leaflet的功能。
微信公众号：673399718嘻嘻
demo图如下：

使用leaflet.js生成世界地图非常方便，配置参数记录下，有兴趣的可以看看本例中引入jquery操作dom。
首先：在页面的头部引入css文件cdn地址：
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
在body前引入js文件cdn地址：
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
将id为mapid的div标签放到地图显示的地方：

<div id="mapid"></div>
确保地图容器有定义好的高度，例如在css文件中添加如下代码：
＃mapid{ height: 180px; }
创建一个中心点在伦敦，使用Mapbox街道瓦片的地图。首先初始化地图，并且设置地图在视窗的中心点和缩放级别：

locate({setView: true, maxZoom: 16})
这里我设置最大的缩放级别为16，并设置地图根据位置自动调整窗口。当用户同意浏览器分享用户位置后，地图将自动调整视窗中心为该位置。

leaflet.js中有两个接口locationerror是获取本地地址失败后调用的回调函数，而locationfound是获取获取本地地址成功后的回调。
确保所有的代码都在创建div标签和引用leaflet.js之前。这样应该没有什么问题了，你现在应用有一个可以使用的Leaflet地图了。

参数介绍：
marker可拖动要设置{draggable:true}参数
获取mark的经纬度信息:marker.getLatLng();
代码里我用了一个数组来存放拖动图标返回的地址经纬度，获取时只需要最后一个确定的位置，即数组最后一个元素：position[position.length-1].lat
弹出框的使用：给地图绑定点击事件，事件发生时，bindPopup方法会把HTML内容和弹出框绑定到一起。当你点击这个对象之后，bindPopup将马上打开一个弹出框。
function onMapClick(e) {
var popup = L.popup();
popup
.setLatLng(e.latlng)
.setContent("你点击的位置在 " + e.latlng.toString())
.openOn(mymap);
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/lea

最低0.47元/天解锁文章

weixin_30394333

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

介绍：Leaflet是一个开源的JavaScript库，对移动端友好且对地图有很好的交互性。大小仅仅只有 33 KB，同时具有大多数地图所需要的特点。Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性。它在桌面端和移动端都工作的相当高效，并有大量的插件用于扩张Leaflet的功能。微信公众号：673399718嘻嘻demo图如下：使用leaflet.js生成世界地图非常方...
复制链接

扫一扫