Skip to content

zyf394/QQMapUtils

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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

About

一个简化腾讯地图操作的小工具

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published