使用Leaflet-开源Javascript地图库

Leaflet是一套适用于各种平台的 JavaScript地图库,可以呈现类似Google地图的效果,由 Universal Mind 的 Vladimir Agafonkin 创建。Leaflet交互性好,是适用于移动设备的开源地图库。

要在网页上呈现地图,除了大多数人所熟知的Google地图之外,Leaflet也很不错。主要特点是使用简单、速度快,许多知名网站(如 GitHub 与 Flickr 等)都是使用Leaflet来呈现地图。

Leaflet的使用

下载Leaflet js库文件:http://leafletjs.com/download.html

引入:

也可以使用官方提供的CDN:

在网页中加入一个 <div> 元素,并且指定一个任意的 id:

在 CSS 中,加入 <div> 元素的高度:

JavaScript代码:

画出来的地图:

地图库可以自行选择,除了 OpenStreetMap 之外,也可以使用 Mapbox 图库。

加入图标

效果:

加入消息块

也可以在地图上建立独立的讯息方块:

事件处理

当使用者点击地图时,显示经纬度座标:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注