前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用

uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用

原创
作者头像
代码哈士奇
修改2021-02-01 10:48:29
1.2K0
修改2021-02-01 10:48:29
举报

专属邀请链接: https://lbs.qq.com?lbs_invite=G9MRFLG 项目开始于2021-01-27 晚8uniapp模板地址 https://ext.dcloud.net.cn/plugin?id=4067 github地址 https://github.com/dmhsq/uniapp-txwzsdk-demo 腾讯位置服务牛逼 腾讯位置服务文档小程序SDK :https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 案例一:实现 位置共享 https://blog.csdn.net/qq_42027681/article/details/113428833 案例二:实现 运动轨迹记录 https://blog.csdn.net/qq_42027681/article/details/113429566 在线体验 (打不开的话可能在审核)

二维码
二维码

虽然说官方文档写的是微信小程序,但是只要是Js其它平台也应该通用 试了下字节小程序可以用

在阅读此文章之前 需要了解 map组件的 部分属性

属性

类型

作用

longitude

Number

经度

latitude

Number

纬度

scale

Number

缩放级别

markers

Array

标记的点

polyline

Array

地图轨迹

@regionchange

EventHandle

视野发生变化时触发

@tap

EventHandle

点击地图触发的事件

引入SDK文件

可以去官网下载 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

下载地址为 https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip

根目录下添加 common 文件夹

在这里插入图片描述
在这里插入图片描述

实例化核心功能类

引入核心类

根据自己文件路径修改路径

var QQMapWX = require('../../common/qqmap-wx-jssdk.js')
引入核心类
引入核心类

实例化

var app = new QQMapWX({
	key: '腾讯位置服务控制台获取'
})

腾讯位置服务控制台获取 key

获取key
获取key

功能接入

说明 : 详细接入可选参数和返回参数 请移步官网 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

接入地点搜索

app.search({
	//from参数不填默认当前地址//fromPs, 格式为 fromPs:{longitude: num,latitude: num}
	keyword: keys, //关键词
	locationto: youP, //格式为 youP: `latitude,longitude` 字符串 比如: "33.643206,114.851074" 或者对象格式{latitude:xxx,longitude:xxx}
	success: res=>{
		console.log(res)
	}
})
数据
数据
数据
数据

属性

类型

作用

longitude

Number

地点经度

latitude

Number

地点纬度

title

Str

地点名称

polygon

Array

地点形状

cricle

Array

圆属性

callout

Array

点击标记的显示属性

关键词输入提醒

app.getSuggestion({
	//from参数不填默认当前地址
	keyword: keys,: //关键词 
	region: city, //可不选,限制搜索城市
	success: res=>{
		console.log(res.data)
	}
})
在这里插入图片描述
在这里插入图片描述

属性

类型

作用

location.lng

Number

地点经度

location.lat

Number

地点纬度

title

Str

地点名称

id

Str

地点id

address

Str

详细地址

category

Str

分类

province

Str

city

Str

district

Str

区县

逆地址解析(坐标转地址)

demo.reverseGeocoder({
	location: fromPs, //格式为 `latitude,longitude` 字符串 比如: "33.643206,114.851074" 或者对象格式{latitude:xxx,longitude:xxx}
	success: function(res) {
		console.log(res.result)
	}
})
数据
数据

属性

类型

作用

location.lng

Number

地点经度

location.lat

Number

地点纬度

title

Str

地点名称

formatted_addresses.rough

Str

详细位置

address

Str

详细地址

category

Str

分类

address_component.nation

Str

国家地区

address_component.province

Str

address_component.city

Str

address_component.district

Str

区县

address_component.street

Str

街道

address_component.street_number

Str

门牌号

address_reference.town

Str

乡镇

address_reference.landmark_l2

Str

村落

地址解析(地址转坐标)

demo.geocoder({
	address: address,//地址
	success: function(res) {
	console.log(res)
		vm.doOne(res.result)
	}
})

属性

类型

作用

location.lng

Number

地点经度

location.lat

Number

地点纬度

title

Str

地点名称

formatted_addresses.rough

Str

详细位置

address

Str

详细地址

category

Str

分类

address_component.nation

Str

国家地区

address_component.province

Str

address_component.city

Str

address_component.district

Str

区县

address_component.street

Str

街道

address_component.street_number

Str

门牌号

ad_info.adcode

Str

地址编号

similarity

Str

输入地址与解析结果误差(文本相似度)

deviation

Str

误差距离

reliability

Str

可信度 越大越可信

路线规划

规划路线
app.direction({
	mode: "" , //driving’(驾车)、‘walking’(步行)、‘bicycling’(骑行)、‘transit’(公交),默认:‘driving’
	//from参数不填默认当前地址
	from: fromPs, //格式为 fromPs:  `latitude,longitude` 字符串 比如: "33.643206,114.851074" 或者对象格式{latitude:xxx,longitude:xxx}
	to: toPs, //格式为 toPs:  `latitude,longitude` 字符串 比如: "33.643206,114.851074" 或者对象格式{latitude:xxx,longitude:xxx}
	success: res=>{
		console.log(res.result.routes)
	}
})
数据
数据

属性

类型

作用

mode

Str

出行方式

distance

Number

距离

duration

Number

规划的时间(包括路况)

polyline

Array

地点路径

距离计算

demo.calculateDistance({
	from: fromP, //格式为  `latitude,longitude` 字符串 比如: "33.643206,114.851074" 或者对象格式{latitude:xxx,longitude:xxx}
	to: toP, //格式为 : `latitude,longitude` 字符串 比如: "33.643206,114.851074" 或者对象格式{latitude:xxx,longitude:xxx}
	success:res=>{
		console.log(res.result.elements)
	}
})
数据
数据

属性

类型

作用

from

Obj

出发点

to

Obj

到达点

distance

Number

距离

获取城市列表

demo.getCityList({
	success: res => {
		console.log(res.result)
	}
})
数据
数据

!数据](https://img-blog.csdnimg.cn/20210130131724337.png)

属性

类型

作用

0/1/2

数组下标

0省级,1市级,2区县级

属性

类型

作用

id

Str

城市编号

name

Str

城市简称

fullname

Str

城市全称

pinyin

Array

城市拼音

location.lng

Number

地点经度

location.lat

Number

地点纬度

cidx

Array

下级行政区在下个数组中的下标

cidx说明 比如 北京 cidx015

那么在市级数组 他的子行政区下标为0~15的

数据
数据

视频预告

https://v.qq.com/x/page/k3225u3xhw1.html?sf=uri

  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!博客主页:https://blog.csdn.net/qq_42027681。 腾讯云+社区专栏https://cloud.tencent.com/developer/column/90853 未经本人允许,禁止转载

嘿嘿
嘿嘿

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引入SDK文件
  • 实例化核心功能类
    • 引入核心类
      • 实例化
      • 功能接入
        • 接入地点搜索
          • 关键词输入提醒
            • 逆地址解析(坐标转地址)
              • 地址解析(地址转坐标)
                • 路线规划
                  • 距离计算
                    • 获取城市列表
                    • 视频预告
                    相关产品与服务
                    云开发 CloudBase
                    云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档