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

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

Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性。 它在桌面端和移动端都工作的相当高效，并有大量的插件用于扩张Leaflet的功能。

微信公众号：673399718嘻嘻

demo图如下：

使用leaflet.js生成世界地图非常方便，配置参数记录下，有兴趣的可以看看本例中引入jquery操作dom。

首先：在页面的头部引入css文件cdn地址：

在body前引入js文件cdn地址：

将id为mapid的div标签放到地图显示的地方：

确保地图容器有定义好的高度，例如在css文件中添加如下代码：

＃mapid{ height: 180px; }

创建一个中心点在伦敦，使用Mapbox街道瓦片的地图。首先初始化地图，并且设置地图在视窗的中心点和缩放级别：

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

下一步在地图上增加一个瓦片图层(渲染的地图图片碎片)，在这个例子中我使用Mapbox街道瓦片图层。创建一个瓦片图层通常涉及到设置URL template来使用瓦片图(获得你的瓦片图在Mapbox)，设置的属性还包括属性文本和图层的最大比例尺。

var mymap = L.map('mapid');

mymap.l