腾讯地图微信小程序JavaScript SDK
2017-02-05 17:00 阅读(252)

简介

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让你的小程序更强大!

Hello world!

1. 申请开发者密钥(key):申请密钥

2. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0

3. 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com

4. 小程序示例

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
 
 
})

使用限制

为了保证我们的服务稳定,我们对每个key的每个服务接口的调用量做了如下限制:

超过日调用量和并发数的开发者,可通过以下途径解决:
     1. 对于多频次的相同请求,可通过缓存结果,并定时访问更新的方式,减少对在线服务调用的依赖;
     2. 对于切实需要大配额来满足应用需求的,请根据[配额申请模板](模板是邮件正文格式,请勿发送附件),编辑邮件发送至:mapapi@vip.qq.com;mapbd@tencent.com, 我们将对您的申请进行评估,并进行审批(3个工作日内),审批通过后将会获得您申请的配额。


QQMapWX

小程序JavaScriptSDK核心类

构造函数说明
new QQMapWX(options:Object)参数: key : 必填,开发密钥(key),申请地址 http://lbs.qq.com/mykey.html
方法返回值说明
search(options:Object)none地点搜索,搜索周边poi,比如:“酒店” “餐饮” “娱乐” “学校” 等等
getSuggestion(options:Object)none用于获取输入关键字的补完与提示,帮助用户快速输入
reverseGeocoder(options:Object)none提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表
geocoder(options:Object)none提供由地址描述到所述位置坐标的转换,与逆地址解析的过程正好相反
getCityList()none获取全国城市列表数据
getDistrictByCityId(options:Object)none通过城市ID返回城市下的区县
calculateDistance(options:Object)none计算一个点到多点的步行、驾车距离

方法options参数通用属性

options中可以指定success, fail, complete来接收接口调用结果,调用结果状态码见下一个表《调用结果状态码》,具体结果数据见方法详细描述页面《返回值》说明。

属性类型必填说明
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

调用结果状态码

statusmessage
0正常
310请求参数信息有误
311key格式错误
306请求有护持信息请检查字符串
110请求来源未被授权
1000小程序内部抛出的错误

示例

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例划API核心类
var demo = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
// 调用接口
demo.search({
    keyword: '酒店',
    success: function(res) {
        console.log(res.status, res.message);
    },
    fail: function(res) {
        console.log(res.status, res.message);
    },
    complete: function(res) {
        console.log(res.status, res.message);
    }
});

search(options:Object)

地点搜索,搜索周边poi,比如:“酒店” “餐饮” “娱乐” “学校” 等等

options属性说明

属性类型必填说明
keywordStringPOI搜索关键字
locationString|Object位置坐标,String格式:lat<纬度>,lng<经度>
Object格式:
{
  latitude: 纬度,
  longitude: 经度
}
默认是当前位置
address_formatString短地址,缺省时返回长地址,可选值:'short'
page_sizeNumber每页条目数,最大限制为20条, 默认值10
page_indexNumber第x页,默认第1页

调用结果

通过属性success, fail, complete的回调参数来接收调用结果

名称类型必有说明
statusnumber状态码,0为正常,
310请求参数信息有误,
311key格式错误,
306请求有护持信息请检查字符串,
110请求来源未被授权
messagestring状态说明
countnumber本次搜索结果总数
dataarray搜索结果POI数组,每项为一个POI对象

idstringPOI唯一标识
titlestringpoi名称
addressstring地址
telstring电话
categorystringPOI分类
typenumberPOI类型,值说明:0:普通POI / 1:公交车站 / 2:地铁站 / 3:公交线路 / 4:行政区划
locationobject坐标

latnumber纬度
lngnumber经度
ad_infoobject行政区划信息,目前仅提供adcode

adcodestring行政区划代码
boundaryarray-轮廓,坐标数组,面积较大的POI会有,如住宅小区
panoobject-该POI的街景最佳查看场景及视角信息

idstring街景场景ID,若有pano信息,则id一定存在
headingnumber-最佳偏航角(与正北方向夹角,街景相关知识请 点击查看
pitchnumber-俯仰角
zoomnumber-缩放级别

示例

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例划API核心类
var demo = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
// 调用接口
demo.search({
    keyword: '酒店',
    success: function(res) {
        console.log(res);
    },
    fail: function(res) {
        console.log(res);
    },
    complete: function(res) {
        console.log(res);
    }
});



关键词输入提示

getSuggestion(options:Object)

用于获取输入关键字的补完与提示,帮助用户快速输入

options属性说明

属性类型必填说明
keywordString用户输入的关键词(希望获取后续提示的关键词)
regionString设置城市名,限制关键词所示的地域范围,如,仅获取“广州市”范围内的提示内容,默认值全国
region_fixNumber取值: 0:[默认]当前城市无结果时,自动扩大范围到全国匹配 1:固定在当前城市
policyNumber检索策略,目前支持:
policy=0:默认,常规策略 
policy=1:本策略主要用于收货地址、上门服务地址的填写, 
提高了小区类、商务楼宇、大学等分类的排序,过滤行政区、
道路等分类(如海淀大街、朝阳区等),排序策略引入真实用户对输入提示的点击热度,
使之更为符合此类应用场景,体验更为舒适

调用结果

通过属性success, fail, complete的回调参数来接收调用结果

名称类型必有说明
statusnumber状态码,0为正常,
310请求参数信息有误,
311key格式错误,
306请求有护持信息请检查字符串,
110请求来源未被授权
messagestring状态说明
countnumber结果总数
dataarray提示词数组,每项为一个POI对象

idstringPOI唯一标识
titlestring提示文字
addressstring地址
provincestring
citystring
adcodestring行政区划代码
typenumberPOI类型,值说明:0:普通POI / 1:公交车站 / 2:地铁站 / 3:公交线路 / 4:行政区划
locationobject提示所述位置坐标

latnumber纬度

lngnumber经度

示例

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例划API核心类
var demo = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
// 调用接口
demo.getSuggestion({
    keyword: '技术',
    success: function(res) {
        console.log(res);
    },
    fail: function(res) {
        console.log(res);
    },
    complete: function(res) {
        console.log(res);
    }
});



逆地址解析(坐标位置描述)

reverseGeocoder(options:Object)

用于获取输入关键字的补完与提示,帮助用户快速输入

options属性说明

属性类型必填说明
locationString|Object位置坐标,String格式:lat<纬度>,lng<经度>
Object格式:
{
  latitude: 纬度,
  longitude: 经度
}
默认是当前位置
coord_typeNumber输入的locations的坐标类型,可选值为[1,6]之间的整数,每个数字代表的类型说明: 
1 GPS坐标
2 sogou经纬度
3 baidu经纬度
4 mapbar经纬度
5 [默认]腾讯、google、高德坐标
6 sogou墨卡托
get_poiNumber是否返回周边POI列表:
1.返回;0不返回(默认)
poi_optionsString用于控制Poi列表:
1 poi_options=address_format=short
返回短地址,缺省时返回长地址
2 poi_options=radius=5000
半径,取值范围 1-5000(米)
3 poi_options=page_size=20
每页条数,取值范围 1-20
4 poi_options=page_index=1
页码,取值范围 1-20
5 poi_options=policy=1/2/3
控制返回场景,
policy=1[默认] 以地标+主要的路+近距离poi为主,着力描述当前位置;
policy=2 到家场景:筛选合适收货的poi,并会细化收货地址,精确到楼栋;
policy=3 出行场景:过滤掉车辆不易到达的POI(如一些景区内POI),增加道路出路口、交叉口、大区域出入口类POI,排序会根据真实API大用户的用户点击自动优化。
6 poi_options=category=分类词1,分类词2, 
指定分类,多关键词英文逗号分隔;
poi_filter=category<>分类词1,分类词2, 
指定不包含分类,多关键词英文逗号分隔 
(支持类别参见:附录)

调用结果

通过属性success, fail, complete的回调参数来接收调用结果

名称类型必有说明
statusnumber状态码,0为正常,
310请求参数信息有误,
311key格式错误,
306请求有护持信息请检查字符串,
110请求来源未被授权
messagestring状态说明
resultobject逆地址解析结果

addressstring地址描述
formatted_addressesobject
位置描述

recommendstring
经过腾讯地图优化过的描述方式,更具人性化特点
roughstring
大致位置,可用于对位置的粗略描述
address_componentobject地址部件,address不满足需求时可自行拼接

nationstring国家
provincestring
citystring
districtstring
区,可能为空字串
streetstring
街道,可能为空字串
street_numberstring
门牌,可能为空字串
ad_infoobject行政区划信息

adcodestring行政区划代码
namestring行政区划名称
locationobject行政区划中心点坐标

latnumber纬度
lngnumber经度
nationstring国家
provincestring省 / 直辖市
citystring市 / 地级区 及同级行政区划
districtstring
区 / 县级市 及同级行政区划
address_referenceobject
坐标相对位置参考

famous_areaobject
知名区域,如商圈或人们普遍认为有较高知名度的区域

titlestring
名称/标题
locationobject
坐标

latnumber
纬度
lngnumber
经度
_distancenumber
此参考位置到输入坐标的直线距离
_dir_descstring
此参考位置到输入坐标的方位关系,如:北、南、内
townobject
乡镇街道

titlestring
名称/标题
locationobjct
坐标

latnumber
纬度
lngnumber
经度
_distancenumber
此参考位置到输入坐标的直线距离
_dir_descstring
此参考位置到输入坐标的方位关系,如:北、南、内
landmark_l1object
一级地标,可识别性较强、规模较大的地点、小区等
【注】对象结构同 famous_area
landmark_l2object
二级地标,较一级地标更为精确,规模更小
【注】:对象结构同 famous_area
streetobject
街道    【注】:对象结构同 famous_area
street_numberobject
门牌    【注】:对象结构同 famous_area
crossroadobject
交叉路口    【注】:对象结构同 famous_area
waterobject
水系    【注】:对象结构同 famous_area
poisarray
POI数组,对象中每个子项为一个POI对象

idstring
POI唯一标识
titlestring
poi名称
addressstring
地址
categorystring
POI分类
locationobject
提示所述位置坐标

latnumber
纬度
lngnumber
经度
_distancenumber
该POI到逆地址解析传入的坐标的直线距离

示例

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例划API核心类
var demo = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
// 调用接口
demo.reverseGeocoder({
    location: {
        latitude: 39.984060,
        longitude: 116.307520
    },
    success: function(res) {
        console.log(res);
    },
    fail: function(res) {
        console.log(res);
    },
    complete: function(res) {
        console.log(res);
    }
});



地址解析(地址转坐标)

geocoder(options:Object)

提供由地址描述到所述位置坐标的转换,与逆地址解析reverseGeocoder()的过程正好相反。

options属性说明

属性类型必填说明
addressString地址(注:地址中请包含城市名称,否则会影响解析效果),如:'北京市海淀区彩和坊路海淀西大街74号'

调用结果

通过属性success, fail, complete的回调参数来接收调用结果

名称类型必有说明
statusnumber状态码,0为正常,
310请求参数信息有误,
311key格式错误,
306请求有护持信息请检查字符串,
110请求来源未被授权

messagestring状态说明
resultobject地址解析结果

locationstring解析到的坐标

latnumber纬度
lngnumber经度
address_componentsobject解析后的地址部件

provincestring
citystring
districtstring区,可能为空字串
streetstring街道,可能为空字串
street_numberstring门牌,可能为空字串
similaritynumber
查询字符串与查询结果的文本相似度
deviationnumber误差距离,单位:米, 该值取决于输入地址的精确度;
如address输入:海淀区北四环西路,因为地址所述范围比较大,因此会有千米级误差;
而如:银科大厦这类具体的地址,返回的坐标就会相对精确;
该值为 -1 时,说明输入地址为过于模糊,仅能精确到市区级。

reliabilitynumber可信度参考:值范围 1 低可信 - 10 高可信
我们根据用户输入地址的准确程度,在解析过程中,将解析结果的可信度(质量),由低到高,分为1 - 10级,该值>=7时,解析结果较为准确,<7时,会存各类不可靠因素,开发者可根据自己的实际使用场景,对于解析质量的实际要求,进行参考。

示例

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例划API核心类
var demo = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
// 调用接口
demo.geocoder({
    address: '北京市海淀区彩和坊路海淀西大街74号',
    success: function(res) {
        console.log(res);
    },
    fail: function(res) {
        console.log(res);
    },
    complete: function(res) {
        console.log(res);
    }
});



距离计算

calculateDistance(options:Object)

计算一个点到多点的步行、驾车距离。

options属性说明

属性类型必填说明
modeString可选值:'driving'(驾车)、'walking'(步行),默认:'walking'
fromString|Object起点坐标,String格式:lat<纬度>,lng<经度>
Object格式:
{
  latitude: 纬度,
  longitude: 经度
}
默认是当前位置
toString|Object终点坐标,String格式:lat,lng;lat,lng... (经度与纬度用英文逗号分隔,坐标间用英文分号分隔)
Object格式1:
[{
  latitude: 纬度,
  longitude: 经度
}, ...]
Object格式2:
此格式主要对应search返回的数据结构格式,方便开发这批量转换
[{
  location: {
    lat: 纬度,
    lng: 经度
  }
}, ...]

调用结果

通过属性success, fail, complete的回调参数来接收调用结果

名称类型说明示例
statusnumber状态码,0为正常,
310请求参数信息有误,
311key格式错误,
306请求有护持信息请检查字符串,
110请求来源未被授权
{
    "status": 0,
    "message": "Query is OK",
    "result":{
        "elements":[
            {
               "from":{
               "lat":39.071510 
               "lng":117.190091 
                 }
                "to":{
               "lat":39.840177,
                "lng":116.463318 
                 }
               "distance":2000 
               "duration":2000 
             } 
        ] 
      } 

messagestring对status的描述
resultobject计算结果

elementsarray结果数组

fromobject起点坐标

latnumber纬度
lngnumber经度
toobject终点坐标

latnumber纬度
lngnumber经度
distancenumber起点到终点的距离,单位:米,
如果radius半径过小或者无法搜索到,则返回-1
durationnumber表示从起点到终点的结合路况的时间,秒为单位 
注:步行方式不计算耗时,该值始终为0










































































































































































示例

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例划API核心类
var demo = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
// 调用接口
demo.calculateDistance({
    to:[{
        latitude: 39.984060,
        longitude: 116.307520
    }, {
        latitude: 39.984572,
        longitude: 116.306339
    }],
    success: function(res) {
        console.log(res);
    },
    fail: function(res) {
        console.log(res);
    },
    complete: function(res) {
        console.log(res);
    }
});



获取城市列表

getCityList(options:Object)

获取全国城市列表数据。

options属性说明

调用结果

通过属性success, fail, complete的回调参数来接收调用结果

名称类型必有说明
statusnumber状态码,0为正常,
310请求参数信息有误,
311key格式错误,
306请求有护持信息请检查字符串,
110请求来源未被授权
messagestring状态说明
resultarray结果数组,第0项,代表一级行政区划,第1项代表二级行政区划,以此类推;使用getchildren接口时,仅为指定父级行政区划的子级

idnumber行政区划唯一标识
namestring-简称,如“内蒙古”
fullnamestring全称,如“内蒙古自治区”
locationstring中心点坐标

latnumber纬度
lngnumber经度
pinyinarray-行政区划拼音,每一下标为一个字的全拼,如:["nei","meng","gu"]
cidxarray-子级行政区划在下级数组中的下标位置

示例

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例划API核心类
var demo = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
// 调用接口
demo.getCityList({
    success: function(res) {
        console.log(res);
    },
    fail: function(res) {
        console.log(res);
    },
    complete: function(res) {
        console.log(res);
    }
});



获取城市区县

getDistrictByCityId(options:Object)

通过城市ID返回城市下的区县。

options属性说明

属性类型必填说明
idString对应接口getCityList返回数据的Id,如:北京是'110000'

调用结果

通过属性success, fail, complete的回调参数来接收调用结果

名称类型必有说明
statusnumber状态码,0为正常,
310请求参数信息有误,
311key格式错误,
306请求有护持信息请检查字符串,
110请求来源未被授权
messagestring状态说明
resultarray结果数组,第0项,代表一级行政区划,第1项代表二级行政区划,以此类推;使用getchildren接口时,仅为指定父级行政区划的子级

idnumber行政区划唯一标识
namestring-简称,如“内蒙古”
fullnamestring全称,如“内蒙古自治区”
locationstring中心点坐标

latnumber纬度
lngnumber经度
pinyinarray-行政区划拼音,每一下标为一个字的全拼,如:["nei","meng","gu"]
cidxarray-子级行政区划在下级数组中的下标位置

示例

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例划API核心类
var demo = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
// 调用接口
demo.getDistrictByCityId({
    id: '110000', // 对应城市ID
    success: function(res) {
        console.log(res);
    },
    fail: function(res) {
        console.log(res);
    },
    complete: function(res) {
        console.log(res);
    }
});