腾讯地图api使用指南

腾讯地图产品

产品 产品描述 使用限制
地图组件(H5) 手机浏览器专用,完整应用功能无需开发,极简接入,包括: H5定位组件(大幅提升手机浏览器定位效果)、地点标注、路线规划等功能
查看文档>>
无限制
地图JavascriptAPI 用于浏览器端地图显示与应用,手机 与 PC浏览器全兼容
查看文档>>
无限制
定位SDK 用于手机端APP定位终端位置:
Android定位SDK iOS定位SDK
无限制
地图SDK 用于手机端APP嵌入地图显示与应用:
Android地图SDK iOS地图SDK
无限制
WebServiceAPI http数据接口,适用于服务端或任意支持http协议的环境, 提供 地址解析、地点搜索、行政区划、路线规划、距离计算等功能, 服务通过输入参数,计算并返回json结构的结果,如需在地图中展现,需要结合SDK或JsAPI一起使用
查看文档>>
日限制:1万次/key/接口
并发限制:5次/秒/key/接口
如需更大配额可进行申请:
点击查看详情

关于 JavaScript API

JavaScript API V2可用于在网站中加入交互性强的街景、地图,能很好地支持PC及手机设备,身材小巧,动画效果顺滑流畅,动感十足,提供地图操作、标注、地点搜索、出行规划、地址解析、街景等接口,功能丰富,并免费开放各种附加工具库。JavaScript API V2是免费服务,任何提供免费访问的网站都可以调用,请参见使用条款。

JavaScript API上手还是比较简单的,资料这块比较齐全:

主要包含大类:

地图
控件
覆盖物
服务
地图类型
街景
事件
基础类
MVC
Geometry Library
Place Library
Drawing Library
Convertor Library

使用指南:
开发指南: http://lbs.qq.com/javascript_v2/index.html
参考手册: http://lbs.qq.com/javascript_v2/doc/index.html
示例demo: http://lbs.qq.com/javascript_v2/demo.html
H5定位组件: http://lbs.qq.com/tool/component-marker.html

说说几个常用的例子:
1.禁止所有的默认控件

1
2
3
4
5
6
7
var map = new qq.maps.Map(document.getElementById("map-canvas"), {
disableDefaultUI: true //禁止所有控件
//或
panControl: true, //平移控件的初始启用/停用状态
zoomControl: false, //缩放控件的初始启用/停用状态
scaleControl: true //滚动标尺控件的初始启用/停用状态
});

2.拖动地图显示地图中心坐标信息

1
2
3
4
5
6
7
8
9
10
11
12
var map = new qq.maps.Map(document.querySelector(".homev2_map_img"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(lat, lng),
zoom: 10, //取值1~15
disableDefaultUI: true,
mapTypeId: qq.maps.MapTypeId.ROADMAP
});

//地图移动获取中心点坐标
qq.maps.event.addListener(map, 'center_changed', function() {
console.log("导出中心点", map.getCenter())
})

3.添加Marker覆盖物标签对齐居中显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
//创建Marker覆盖物
createMarker (map, lat, lng, callback, txt = "塞纳春天大家好") {
//http://lbs.qq.com/javascript_v2/doc/markeroptions.html 定义覆盖物图片
//http://lbs.qq.com/javascript_v2/doc/markerimage.html
let center = new qq.maps.LatLng(lat, lng)
let anchor = new qq.maps.Point(0, 58/4),
size = new qq.maps.Size(52, 58),
origin = new qq.maps.Point(0, 0),
scaleSize = new qq.maps.Size(52/2, 58/2)
let markerIcon = new qq.maps.MarkerImage(
"//wq.360buyimg.com/fd/h5/wx/home_v2/images/homev2_map_icon_b00aa33e.png",
size,
origin,
anchor,
scaleSize
)

let marker = new qq.maps.Marker({
position: center,
//animation:qq.maps.MarkerAnimation.DROP, 动画类型,需设置阴影,如果没则出现关闭叉
map: map
})

marker.setIcon(markerIcon)
if(callback){
//绑定事件
qq.maps.event.addListener(marker, 'click', function() {
callback && callback()
})
}


this.createMarkerLable(map, lat, lng, txt, function(){
callback && callback()
})
}

//创建标签,通过样式控制居中
createMarkerLable (map, lat, lng, txt, callback) {
//http://lbs.qq.com/javascript_v2/doc/label.html
//http://lbs.qq.com/javascript_v2/doc/labeloptions.html文字设置
let center = new qq.maps.LatLng(lat, lng)

let markerLabel = new qq.maps.Label({
position: center,
map: map,
content: txt,
offset: new qq.maps.Size(24/2, -34),
zIndex: 10,
style: {
color: "#fff",
backgroundColor: "rgba(165,103,65,.85)",
// left: "50%",
webkitTransform: "translateX(-50%)",
height: "15px",
textAlign: "center",
fontSize: "10px",
lineHeight: "15px",
padding: "0 4px",
border: "0",
webkitBorderRadius: "2px"
}
})
//绑定事件
qq.maps.event.addListener(markerLabel, 'click', function() {
callback && callback()
})
}

ps: pc端没有定位传感器,无法做到准确定位,定位实现通常是通过ip分析转换,腾讯地图默认没有传感器不会做处理。

参考资料:

开发指南
参考手册
示例demo
H5定位组件
为何在PC浏览器地图上,不制作定位当前位置的功能?
网页版百度地图是如何定位的?