资讯专栏INFORMATION COLUMN

实用js库-使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

Lucky_Boy / 2618人阅读

摘要:大小仅仅只有,同时具有大多数地图所需要的特点。微信公众号嘻嘻图如下使用生成世界地图非常方便,配置参数记录下,有兴趣的可以看看本例中引入操作。当用户同意浏览器分享用户位置后,地图将自动调整视窗中心为该位置。

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

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

使用leaflet.js生成世界地图非常方便,配置参数记录下,有兴趣的可以看看本例中引入jquery操作dom。
首先:在页面的头部引入css文件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.locate({setView: true, maxZoom: 16});
var position = [];
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw", {

maxZoom: 18,
id: "mapbox.streets"

}).addTo(mymap);
Leaflet有一个非常巧妙的方法来处理地图的缩放级别和探测用户地理位置--带有setView选项的locate方法。使用常用的setView方法在这行代码中:

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);

}

代码:



Title




新建仓库

返回 请在地图中选择您仓库的地理位置,以便存储仓库信息。





文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91347.html

相关文章

  • 实用js使用JSLeaflet.js生成世界地图获取标注地址纬度

    摘要:大小仅仅只有,同时具有大多数地图所需要的特点。微信公众号嘻嘻图如下使用生成世界地图非常方便,配置参数记录下,有兴趣的可以看看本例中引入操作。当用户同意浏览器分享用户位置后,地图将自动调整视窗中心为该位置。 介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性。 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点。 Leaflet设计的非常简...

    seasonley 评论0 收藏0
  • 实用js使用JSLeaflet.js生成世界地图获取标注地址纬度

    摘要:大小仅仅只有,同时具有大多数地图所需要的特点。微信公众号嘻嘻图如下使用生成世界地图非常方便,配置参数记录下,有兴趣的可以看看本例中引入操作。当用户同意浏览器分享用户位置后,地图将自动调整视窗中心为该位置。 介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性。 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点。 Leaflet设计的非常简...

    isaced 评论0 收藏0
  • Leaflet快速开始教程

    摘要:提示在官方教程的基础上,增加了一些注释以及链接,可帮助读者更好的学习有不正确或有待改进的地方,欢迎批评指出。明确容器的高度。首先我们将初始化地图,通过选定的地理坐标设置地图视角以及缩放级别。 提示:在Leaflet官方教程的基础上,增加了一些注释以及链接,可帮助读者更好的学习Leaflet,有不正确或有待改进的地方,欢迎批评指出。 Leaflet an open-source Java...

    gecko23 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高胜山 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<