#QQMapUtils# 一个简化腾讯地图操作的小工具。对腾讯地图常用的几个api做了统一风格的封装,去掉了一些api里面不常用的属性和方法,方便开发者调用。
##如何开始?##
- 使用QQMapUtils之前,需要在你的html中引用腾讯地图,然后再引入qqMap.js。
示例:
<script src="https://map.qq.com/api/js?v=2.exp&key=yourKey&libraries=geometry,convertor"></script>
<script src="qqMap.js"></script>
- 引入腾讯地图之后,用QQMapUtils初始化地图配置。
示例:
var map = QQMap.init(".map", {
center: [39.916527, 116.397128],
zoom: 12,
});
- QQMap.setMarker(options)
##如何配置?##
- 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
});
- 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只能全部解除绑定,无法指定解除某个绑定的事件
- 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();
- 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只能全部解除绑定,无法指定解除某个绑定的事件
- 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只能全部解除绑定,无法指定解除某个绑定的事件
- QQMap.setInfoWindow(options)
在地图上设置自定义弹窗
参数 | 类型 | 默认 | 备注 |
---|---|---|---|
options.content | 必传 | content是弹窗的内容元素。 | |
options.position | 必传 | position是弹窗在地图中经纬度位置。 | |
options.map | 选传 | 设置Marker在哪个地图上展示。 |
例如:
var infoWindow = QQMap.setInfoWindow({
content: "<span>我是弹窗</span>",
position: [39.916527, 116.397128]
})
- QQMap.setZoom(num)
设置地图缩放级别
例如:
QQMap.setZoom(20)
- QQMap.setCenter(options)
设置地图中心坐标。(lat:纬度,lng:经度)
参数 | 类型 | 默认 | 备注 |
---|---|---|---|
options.center | 必传 | 经纬度。 | |
options.map | 选传 | 设置Marker在哪个地图上展示。 |
例如:
QQMap.setCenter({
center:[39.10123,106.12311],
map:map
})
- QQMap.setBoundsPoint(lat,lng)
设置地图显示边界内包含的点,需配合QQMap.setMapBounds使用。(lat:纬度,lng:经度)
参数 | 类型 | 默认 | 备注 |
---|---|---|---|
lat | 必传 | 纬度。 | |
lng | 必传 | 经度。 |
例如:
QQMap.setBoundsPoint(40,50)
- 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();
- 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