qqMap

QQMapUtils#

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

如何开始？##

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

示例：

<script src="http://map.qq.com/api/js?v=2.exp&key=yourKey&libraries=geometry,convertor"></script>
<script src="qqMap.js"></script>

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

示例：

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

1. 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
});

1. 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只能全部解除绑定，无法指定解除某个绑定的事件

1. 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: "<span>哈哈哈</span>",
    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();

1. 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只能全部解除绑定，无法指定解除某个绑定的事件

1. 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只能全部解除绑定，无法指定解除某个绑定的事件

1. QQMap.setInfoWindow(options)

在地图上设置自定义弹窗

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

例如：

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

1. QQMap.setZoom(num)

设置地图缩放级别

例如：

QQMap.setZoom(20)

1. QQMap.setCenter(options)

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

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

例如：

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

1. QQMap.setBoundsPoint(lat,lng)

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

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

例如：

QQMap.setBoundsPoint(40,50)

1. 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<path.length;i++){
    QQMap.setBoundsPoint(path[i][0],path[i][1])
}
QQMap.setMapBounds();

1. 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