基础起步
leafletleaflet是一个移动端友好的交互性地图的js开源库。
这个 同学对它有一个初步的介绍。
leaflet的设计原则是简单,可执行,可用,有相当多的插件,有文档,开源。
好吧,我们还是从一个简单的例子来吧。quick-start讲了一下地图的基本用法。
- 首先,预备工作。
加载css没问题吧,加载script没问题吧。要有div元素也没问题吧。div元素要有高度也没问题吧。
1. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
2. <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
3. <div id="mapid"></div>
4. #mapid { height: 180px; }
- 现在开始加载地图的代码
//绑定div元素,设置经纬度,13是放大倍数。这个操作初始化了我们的主要实例mymap,以后别的东西都要往上堆积
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
//地图是由一层一层的元素组成的,首先我们要加载基础层的元素。于是设置了 tileLayer,应该是普通地图吧。access_token要自己去申请的,我直接用了示例的。
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
//attribution先不管
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
//maxZoom是最大放大倍数
maxZoom: 18,
//id是地图的类型,可以先填 'mapbox.streets'
id: 'mapbox.streets',
}).addTo(mymap);
- 后面的思路类似,都是一层一层往上面加东西,比如加了一个标志,这里面可能图标要自己下载设定一下。
var marker = L.marker([51.5, -0.09]).addTo(mymap);
ok,这就是基础。
自定义marker
之前只要利用自定义的配置L.marker加坐标就能有一个默认的图案,但是有时候我们想自己定义怎么办,这个时候有两种方案,一种方案是利用现有的图案,新生成一个LeafIcon的实体,icon
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'});
L.marker([51.495, -0.083], {icon: greenIcon }).bindPopup("I am a red leaf.").addTo(map);
如果想自定义内容的话,那么就利用divIcon
var myIcon = L.divIcon({html:"<div class='love'>my content</div>",className:"myclass"});
L.marker([51.5, -0.09], {icon: myIcon}).bindPopup("I am a green leaf.").addTo(map);
网友评论