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

编程语言 2021-01-31 10:11:30 阅读次数: 0

专属邀请链接： https://lbs.qq.com?lbs_invite=G9MRFLG
项目开始于2021-01-27 晚8

uniapp模板地址 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

引入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
在这里插入图片描述

功能接入

说明 : 详细接入可选参数和返回参数 请移步官网 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)
	}
})

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

属性 类型 作用
0/1/2 数组下标 0省级，1市级，2区县级
属性 类型 作用
id Str 城市编号
name Str 城市简称
fullname Str 城市全称
pinyin Array 城市拼音
location.lng Number 地点经度
location.lat Number 地点纬度
cidx Array 下级行政区在下个数组中的下标

cidx说明 比如 北京 cidx[015]
那么在市级数组 他的子行政区下标为0~15的
在这里插入图片描述



视频预告

uniapp整合腾讯位置服务开发小程序位置服务---One---开题及预告







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

未经本人允许，禁止转载

在这里插入图片描述


后续会推出

前端：vue入门 vue开发小程序 等
后端： java入门 springboot入门等
服务器：mysql入门 服务器简单指令 云服务器运行项目
python：推荐不温卜火 一定要看哦
一些插件的使用等

大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910
在这里插入图片描述

有问题可以下方留言，看到了会回复哦

猜你喜欢

转载自blog.csdn.net/qq_42027681/article/details/113405971
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022