Map
# 示例
```javascript
// 在 map 层初始化
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
```
> 在线Demo：[http://j srun.net/EG6Kp](http://jsrun.net/EG6Kp)
## 构造函数
|方法|描述|
|:----|:----|
|W.map(< String > id, < Map options> options?)|给定div的id和地图属性选项来创建一个地图对象|
|W.map(< HTMLElement > el), < Map options> options?)|通过一个html element对象和地图属性选项来创建地图对象|
### 构造选项
|选项名|类型|默认值|描述|
|:----|:----|:----|:----|
|center|[LatLng](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLng.html)|undefined|初始地图中心点|
|zoom|Number|undefined|初始地图缩放级别|
|attributionControl|Boolean|true|指定是否将属性控件添加到地图上。|
|zoomControl|Boolean|true|指定是否将级别缩放控件添加到地图上。|
|closePopupOnClick|Boolean|true|当设置为true的时候,鼠标点击地图（不是气泡的关闭按钮）将关闭已打开的气泡|
|minZoom|Number|W.config.getMinZoom()|地图最小级别|
|maxZoom|Number|W.config.getMaxZoom()|地图最大级别|
|maxBounds|[LatLngBounds](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLngBounds.html)|W.config.getMaxBounds()|地图范围|
|doubleClickZoom|Boolean|true|当双击地图时,是否放大地图|
|dragging|Boolean|true|鼠标拖拽或触摸地图是否可被拖动|
---
## 方法
### 图层和控件相关方法
|方法名|返回值|描述|
|:----|:----|:----|
|addControl(<[Control](http://www.dituyi.com.cn/docs/js-api/wmap-api/Control.html)> control)|this|添加地图控件|
|removeControl(<[Control](http://www.dituyi.com.cn/docs/js-api/wmap-api/Control.html)> control)|this|删除地图控件|
|addLayer(<[Layer](http://www.dituyi.com.cn/docs/js-api/wmap-api/Layer.html)>layer )|this|将图层添加到地图上|
|removeLayer<[Layer](http://www.dituyi.com.cn/docs/js-api/wmap-api/Layer.html)>layer|this|从地图上删除图层|
|hasLayer<[Layer](http://www.dituyi.com.cn/docs/js-api/wmap-api/Layer.html)>layer|Boolean|判断图层是否已经叠加到地图上|
|openPopup(<[Popup](http://www.dituyi.com.cn/docs/js-api/wmap-api/Popup.html)>popup )|this|在地图上打开一个气泡|
|closePopup()|this|关闭地图上的气泡|
### 修改地图状态相关方法
|方法名|返回值|描述|
|:----|:----|:----|
|setView(<[LatLng](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLng.html)> center,< Number > zoom)|this|设置地图视角（中心点和级别）|
|setZoom(< Number >zoom)|this|设置地图级别|
|zoomIn()|this|放大地图|
|zoomOut()|this|缩小地图|
|fitBounds(<[LatLngBounds](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLngBounds.html)> bounds)|this|设定地图范围|
|panTo(<[LatLng](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLng.html)> latlng)|this|平移地图至指定的坐标|
|panBy(<[Point](http://www.dituyi.com.cn/docs/js-api/wmap-api/Point.html)> offset)|this|平移地图到指定的像素点|
|flyTo(<[LatLng](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLng.html)>latlng,<Number>zoom?)|this|平滑的跳转到指定的位置和级别|
|flyToBounds(<[LatLngBounds](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLngBounds.html)> bounds)|this|平滑跳转到指定的范围|
|setMaxBounds(<[Bounds](http://www.dituyi.com.cn/docs/js-api/wmap-api/Bounds.html)>bounds)|this|设置地图最大范围|
|setMinZoom(< Number > zoom)|this|设置地图最小级别|
|setMaxZoom(< Number > zoom)|this|设置地图最大级别|
|stop()|this|停止地图正在进行的行为panTo、FlyTo等|
### 获得地图状态相关方法
|方法名|返回值|描述|
|:----|:----|:----|
|getCenter()|[LatLng](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLng.html)|获得地图中心点|
|getZoom()|Number|获得地图级别|
|getBounds()|[LatLngBounds](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLngBounds.html)|获得地图当前范围|
|getMinZoom()|Number|获得地图最小级别|
|getMaxZoom()|Number|获得地图最大级别|
|getBoundsZoom(<[LatLngBounds](http://www.dituyi.com.cn/docs/js-api/wmap-api/LatLngBounds.html)>bounds,<Boolean>inside?)|Number|获得填充指定范围的地图最大级别|
|getSize()|[Point](http://www.dituyi.com.cn/docs/js-api/wmap-api/Point.html)|获得地图的像素大小|
|getPixelBounds()|[Bounds](http://www.dituyi.com.cn/docs/js-api/wmap-api/Bounds.html)|获得地图当前的像素大小范围|
|getPixelOrigin()|[Point](http://www.dituyi.com.cn/docs/js-api/wmap-api/Point.html)|获得地图像素范围大小从原点开始计算|
|getPixelWorldBounds(< Number >zoom?)|[Bounds](http://www.dituyi.com.cn/docs/js-api/wmap-api/Bounds.html)|获得地图的像素范围|
### 绘制相关方法
|方法名|返回值|描述|
|:----|:----|:----|
|drawPoint(< Function > callback)|this|绘制点 该回调函数有一个参数：该点的坐标(geom)|
|drawCircle(< Function > callback)|this|绘制圆 该回调函数有两个参数：圆心的坐标(geom),圆的半径(radius)|
|drawRectangle(< Function > callback)|this|绘制矩形 该回调函数有一个参数：该矩形的坐标(geom)|
|drawLineString(< Function > callback)|this|绘制折线 该回调函数有一个参数：该折线的坐标(geom)|
|drawPolygon(< Function > callback)|this|绘制多边形 该回调函数有一个参数：该多边形的坐标(geom)|
|stopDraw()|this|停止绘制|
|measureArea(< Function > callback)|this|绘制一个面并且测量它的面积,该回调函数有两个参数：该面的面积(area) 没有可读性（单位：平方米）, 该面的面积(readableArea) 有可读性（单位：平方千米）|
|measureLength(< Function > callback)|this|绘制一个折线并且测量它的长度,该回调函数有两个参数：该折线的长度(length) 没有可读性（单位：米）, 该折线的长度(readableLength) 有可读性(单位：千米)|
### GeoJSON相关相关方法
|方法名|返回值|描述|
|:----|:----|:----|
|geometryToLayer(< Object > geojson,< Options> options?)|[Layer](http://www.dituyi.com.cn/docs/js-api/wmap-api/Layer.html)|将GeoJSON要素或几何对象转换为Layer|
|geometryToCircle(< Object > geojson,< Number> redius,< Options> options?)|[Circle](http://www.dituyi.com.cn/docs/js-api/wmap-api/Circle.html)|将GeoJSON要素转换为一个Circle Layer|
|geometryToMarker(< Object > geojson,< Options> options?)|[Marker](http://www.dituyi.com.cn/docs/js-api/wmap-api/Marker.html)|将GeoJSON要素转换为Marker|
|geometryToCircleMarker(< Object > geojson,< Options> options?)|[CircleMarker](http://www.dituyi.com.cn/docs/js-api/wmap-api/CircleMarker.html)|将GeoJSON要素转换为CircleMarker|
|asFeature(< Object > geom)|Feature|将GeoJSON几何对象转换为GeoJSON 要素对象|
|asGeometry(< Object > feature)|Geometry|将GeoJSON要素对象转换为GeoJSON 几何对象|
### 其他方法
|方法名|返回值|描述|
|:----|:----|:----|
|invalidateSize()|this|如果地图容器的大小发生变化,调用这个方法可以动态的改变地图的大小|
---
## 事件
### 图层相关事件
|事件名称|数据|描述|
|:----|:----|:----|
|baselayerchange|[LayersControlEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/LayersControlEvent.md)|当底图改变时触发|
|overlayadd|[LayersControlEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/LayersControlEvent.md)|当在图层控件中选择显示一个图层时触发该事件|
|overlayremove|[LayersControlEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/LayersControlEvent.md)|当在图层控件中选择隐藏一个图层时触发该事件|
|layeradd|[LayerEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/LayerEvent.md)|当向地图上添加一个图层时触发|
|layerremove|[LayerEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/LayerEvent.md)|当从地图上删除一个图层时触发|
### 地图状态改变事件
|事件名称|数据|描述|
|:----|:----|:----|
|zoomlevelschange|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图级别改变时触发|
|resize|[ResizeEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/ResizeEvent.md)|当地图大小发生改变的时候触发|
|unload|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图销毁时触发|
|viewreset|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图上的内容需要重绘时触发，一般是在地图级别发生改变，或地图加载时触发|
|load|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图第一次加载时触发.|
|zoomstart|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图级别发生改变前触发|
|movestart|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图移动开始时触发|
|zoom|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图级别改变时触发|
|move|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图移动时触发|
|zoomend|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图级别发生改变后触发|
|moveend|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图移动后触发|
### 气泡相关事件
|事件名称|回调数据|描述|
|:----|:----|:----|
|popupopen|[PopupEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/PopupEvent.md)|当气泡打开时触发|
|popupclose|[PopupEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/PopupEvent.md)|当气泡关闭时触发|
|autopanstart|[Event](http://www.dituyi.com.cn/docs/js-api/wmap-api/Event.md)|当地图自动移动时触发，一般都是在弹出气泡的时候触发|
### 提示信息事件
|事件名称|回调数据|描述|
|:----|:----|:----|
|tooltipopen|[TooltipEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/TooltipEvent.md)|当提示信息打开时触发|
|tooltipclose|[TooltipEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/TooltipEvent.md)|当提示信息关闭时触发|
### 交互相关事件
|事件名称|回调数据|描述|
|:----|:----|:----|
|click|[MouseEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/MouseEvent.md)|当点击地图时触发|
|dblclick|[MouseEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/MouseEvent.md)|当双击地图时触发|
|mousedown|[MouseEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/MouseEvent.md)|当鼠标落下时触发|
|mouseup|[MouseEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/MouseEvent.md)|当鼠标弹起时触发|
|mouseover|[MouseEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/MouseEvent.md)|当鼠标移入时触发|
|mouseout|[MouseEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/MouseEvent.md)|当鼠标移出触发|
|mousemove|[MouseEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/MouseEvent.md)|当鼠标移动时触发|
|contextmenu|[MouseEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/MouseEvent.md)|当点击右键时触发|
|keypress|[KeyboardEvent](http://www.dituyi.com.cn/docs/js-api/wmap-api/KeyboardEvent.md)|当点击键盘上的按钮时触发|