qqMap

#QQMapUtils#
一个简化腾讯地图操作的小工具。对腾讯地图常用的几个api做了统一风格的封装，去掉了一些api里面不常用的属性和方法，方便开发者调用。

##如何开始？##
1. 使用QQMapUtils之前，需要在你的html中引用腾讯地图，然后再引入qqMap.js。

示例：

2. 引入腾讯地图之后，用QQMapUtils初始化地图配置。

示例：

var map = QQMap.init(".map", {
center: [39.916527, 116.397128],
zoom: 12,
});

2. QQMap.setMarker(options)

##如何配置？##
1. QQMap.init(selector,options)

初始化地图，只能给一个元素放置地图。以下所有方法必须在执行init后才能生效。

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| selector |必传 | | 设置放置地图的元素，使用jq式选择器，例如：QQMap.init("#map",...) |
| options.center |必传 | | 设置地图展示的中心点，传入一个包含经纬度的数组。例如：center:[39.916527, 116.397128] |
| options.zoom |选传 | 0 | 初始化地图缩放级别，默认为级别0。 |
| options.backgroundColor | 选传 | rgb(229, 227, 223) |用作地图的背景颜色。当用户进行平移时，如果尚未载入图块，则显示此颜色。仅在地图初始化时，才能设置此选项。|
| options.panControl | 选传|true | 地图平移控件，若为false则不显示平移控件。|
| options.zoomControl | 选传 |true | 地图缩放控件，若为false则不显示缩放控件。|
| options.scaleControl | 选传|true | 地图缩放控件，若为false则不显示缩放控件。|

示例：

var map = QQMap.init(".map", {
center: [39.916527, 116.397128],
zoom: 12,
backgroundColor:"#fa8919",
panControl:true,
zoomControl:true,
scaleControl:false
});

2. QQMap.setMarker(options)

在地图上设置自定义图标

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| options.position |必传 | | 设置图标的位置。|
| options.url |必传 | | url是图标的自定义图片链接。|
| options.size |选传 | [1,1] | size是图标尺寸，该尺寸为显示图标的实际尺寸。 |
| options.origin | 选传 | [0,0] |origin是切图坐标，该坐标是相对于图片左上角的相对像素坐标。|
| options.anchor | 选传|[0,0] | anchor是锚点坐标，描述经纬度点对应图标中的位置。|
| options.scaleSize | 选传 |[0,0] | 缩放尺寸，用于拉伸或缩小原图片时使用，该尺寸是用来改变整个图片的尺寸。|
| options.shape | 选传| | 设置Marker的响应范围。|
| options.map | 选传| | 设置Marker在哪个地图上展示。|

例如：

var marker = QQMap.setMarker({
position: [39.916527, 116.397128],
url: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
size: [150, 150],
origin: [0, 0],
anchor: [75, 75],
scaleSize: [150, 150],
shape: {
coords: [0, 0, 50],
type: "circle"
//当type为"circle"时，coords的形式为[x1,y1,r]，其中x1，y1是圆中心点，r是圆的半径；
//当type为"poly"时，coords的形式为[x1,y1,x2,y2...xn,yn]，其中每一对x，y表示一个多边形的顶点位置；
//当type为"rect"时，coords的形式为[x1,y1,x2,y2]，x1，y1表示矩形左上角顶点位置，x2，y2表示矩形右下角
}，
map:map
});

绑定/移除事件：

| 方法 |参数 |
| ------------- |:-------------:|
| .on(type,function) |type：事件类型；function：事件触发后的回调函数 |
| .off() |此处无需传参数 |

例如：

var marker = QQMap.setMarker(...);
marker.on("click",function(){
alert(1)
});
marker.off();//qqMap里marker只能全部解除绑定，无法指定解除某个绑定的事件

3. QQMap.setOverlay(options)

在地图上设置自定义浮层

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| options.content |必传 | | content是浮层的内容元素。|
| options.position |必传 | | position是浮层在地图中经纬度位置。|
| options.offSet |选传 | [0,0] | offSet是浮层相对于position的偏移量。 |
| options.zIndex | 选传 | |zIndex是浮层在地图上的z-index层级。|
| options.style | 选传| | style是浮层的自定义样式。|
| options.map | 选传| | 设置Marker在哪个地图上展示。|

例如：

var overlay = QQMap.setOverlay({
content: "哈哈哈",
position: [39.916527, 116.397128],
offSet: [200, 200],
zIndex: 999,
style: "width:100px"，
map:map
});

绑定/移除事件：

| 方法 |参数 |
| ------------- |:-------------:|
| .on(type,function) |type：事件类型；function：事件触发后的回调函数 |
| .off(type,function) |type：事件类型；function：事件触发后的回调函数 |
| .getDom() |无 |

例如：

var overlay = QQMap.setOverlay(...);
function clickFunction(){
alert(1)
}
overlay.on("click",clickFunction);
overlay.off("click",clickFunction);
var overlayDom = overlay.getDom();

4. QQMap.setPolyLine(options)

在地图上设置多边形

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| options.path |必传 | | path是多边形上的点集合，必须为[ [lat1,lng1], [lat2,lng2], [lat3,lng3]...]形式的二维数组。|
| options.clickable |选传 |true | 设置多边形是否可点击。|
| options.cursor |选传 | "pointer" | 设置鼠标样式。|
| options.fillColor |选传 | "#2691ea" | 设置多边形颜色。|
| options.strokeColor | 选传 | solid |设置多边形描边颜色。|
| options.strokeWeight |选传 | 1 | 设置多边形描边粗细。 |
| options.visible | 选传|true | 设置折线是否可见。|
| options.zIndex | 选传|0 | 设置折线的z-index层级。|
| options.map | 选传| | 设置折线在哪个地图上展示。|

绑定/移除事件：

| 方法 |参数 |
| ------------- |:-------------:|
| .on(type,function) |type：事件类型；function：事件触发后的回调函数 |
| .off() |此处无需传参数 |

例如：

var polyLine = QQMap.setPolyLine(...);
polyLine.on("click",function(){
alert(1)
});
polyLine.off();//qqMap里polyLine只能全部解除绑定，无法指定解除某个绑定的事件

5. QQMap.setPolygon(options)

在地图上设置折线

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| options.path |必传 | | path是折线上的点集合，必须为[ [lat1,lng1], [lat2,lng2], [lat3,lng3]...]形式的二维数组。|
| options.clickable |选传 |true | 设置折线是否可点击。|
| options.cursor |选传 | "pointer" | 设置鼠标样式。|
| options.strokeColor |选传 | "#2691ea" | 设置折线颜色。|
| options.strokeWeight |选传 | 1 | 设置折线粗细。 |
| options.strokeDashStyle | 选传 | solid |设置折线形式，只有solid（实线）、dash（虚线）两种。|
| options.visible | 选传|true | 设置折线是否可见。|
| options.zIndex | 选传|0 | 设置折线的z-index层级。|
| options.map | 选传| | 设置多边形在哪个地图上展示。|

绑定/移除事件：

| 方法 |参数 |
| ------------- |:-------------:|
| .on(type,function) |type：事件类型；function：事件触发后的回调函数 |
| .off() |此处无需传参数 |

例如：

var polygon = QQMap.setPolygon(...);
polygon.on("click",function(){
alert(1)
});
polygon.off();//qqMap里polyLine只能全部解除绑定，无法指定解除某个绑定的事件

6. QQMap.setInfoWindow(options)

在地图上设置自定义弹窗

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| options.content |必传 | | content是弹窗的内容元素。|
| options.position |必传 | | position是弹窗在地图中经纬度位置。|
| options.map | 选传| | 设置Marker在哪个地图上展示。|

例如：

var infoWindow = QQMap.setInfoWindow({
content: "我是弹窗",
position: [39.916527, 116.397128]
})

7. QQMap.setZoom(num)

设置地图缩放级别

例如：

QQMap.setZoom(20)

8. QQMap.setCenter(options)

设置地图中心坐标。（lat：纬度，lng：经度）

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| options.center |必传 | | 经纬度。|
| options.map | 选传| | 设置Marker在哪个地图上展示。|

例如：

QQMap.setCenter({
center:[39.10123,106.12311],
map:map
})

9. QQMap.setBoundsPoint(lat,lng)

设置地图显示边界内包含的点，需配合QQMap.setMapBounds使用。（lat：纬度，lng：经度）

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| lat |必传 | | 纬度。|
| lng |必传 | | 经度。|

例如：

QQMap.setBoundsPoint(40,50)

10. QQMap.setMapBounds()

设置地图显示边界。需先使用QQMap.setBoundsPoint(lat,lng)设置边界内包含的点后才能生效。

例如：

var path = [
[39.916527, 116.387128],
[39.926627, 116.397158],
[39.936528, 116.397428]
];
for(var i =0 ;i QQMap.setBoundsPoint(path[i][0],path[i][1])
}
QQMap.setMapBounds();

11. QQMap.translate(options)

将其他地图服务商的坐标批量转换成腾讯地图经纬度坐标。

| 参数 |类型 |默认|备注 |
| ------------- |:-------------:|:-------------:|:-------------:|
| position |必传 | | 原始坐标位置。|
| type |必传 | | type用于说明是哪个服务商的坐标。 type的可选值为 1：gps经纬度；2：搜狗经纬度；3：百度经纬度；4：mapbar经纬度；5：google经纬度；6：搜狗墨卡托。|
| callBack |选传 | | 转换完成后回调函数，转换后的结果保存在参数data中。|

例如：

QQMap.translate({
position:[39.916527, 116.387128],
type:1,
callBack:function(data){
console.log(data)
}
})

##如何测试？##

npm run test


##压缩##

npm run uglify