leaflet系列（一）

leaflet是用来在页面中创建地图并操纵地图的开源js库。它简单易上手，有大量可扩展的插件，是我在做地图的时候最常使用的一款地图引擎。
🌠🌠🌈🤔🤔🤔首先我们来做一个小demo，感受一下leaflet吧。🤢🤢🤢
准备工作：
1.❤在HTML代码中写入一个id为map的div，作为地图的容器。
2.❤同时设定该div的高度。
3.❤并且引入leaflet.css和leaflet.js。
4.❤在script中加入以下代码：这样我们就能得到一个最简单的地图demo，该地图可以通过鼠标进行缩放和移动。

var map = L.map(‘map’).setView([51.505, -0.09], 13);
L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’, {
attribution: ‘© <a href=”http://osm.org/copyright”>OpenStreetMap</a> contributors’
}).addTo(map);

代码详解：
1.L是leaflet的简称，setView 里有两个参数，第一个参数是一个坐标，表示设置这个点为当前地图的中心点，第二个参数表示设置当前地图的层级为13。
2.tileLayer方法用来加载和显示地图。这里用的osm的地图。网址模板如下：’http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png’：

<1>.{s}是可用的子域，顺序地用于帮助每个域限制浏览器并行请求，子域值在选项中指定; a，b或c通过默认，可省略
<2>.{z}-缩放级别
<3>.{x}以及{y}-tile坐标
<4>.{r}可用于将“@ 2x”添加到URL以加载视网膜图层

3.attribution:要在属性控制中显示的字符串，描述层数据，例如“©Mapbox”。可省略，但是处于尊重版权考虑最好还是加上

4. .addTo(map)表示把当前生成的地图实例添加到自定义的map 容器里。

marker的相关操作

最常见的是在地图上添加标记，即marker。
添加marker的两种方式。

♦️直接调用L.marker() 方法，参数是一个坐标点，然后添加到自己的地图上。这种办法都是直接给了固定的坐标，marker是静态的。

var marker = L.marker([51.5, -0.09]).addTo(mymap);

♦️实例化一个marker.这里的e.latlng是获取你在地图上触发的事件的经纬度坐标.也就是只要触发事件就会得到一个marker。此时添加marker是动态的。draggable:表示是否可以拖动。一个使DOM元素可拖动的类（包括触摸支持）。内部用于地图和标记拖动。仅适用于定位的元素
L.DomUtil.setPosition

marker = new L.Marker(e.latlng, {draggable:true});
map.addLayer(marker);

♦️移除marker

map.removeLayer(marker);

♦️将当前marker的位置设置为地图的中心点

map.panTo() //使用平移或缩放动画平移到该位置
map.setView() //将新视图设置为所需位置和缩放级别

暂时先介绍这么多，下回再补充🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉