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

小灰灰 2022-10-24 13:24 396阅读 0赞

> 专属邀请链接 这里进入腾讯位置服务官网： [https://lbs.qq.com?lbs\_invite=G9MRFLG][https_lbs.qq.com_lbs_invite_G9MRFLG]  
> 项目开始于2021-01-27 晚8
> 
> uniapp模板地址 [https://ext.dcloud.net.cn/plugin?id=4067][https_ext.dcloud.net.cn_plugin_id_4067]  
> github地址 [https://github.com/dmhsq/uniapp-txwzsdk-demo][https_github.com_dmhsq_uniapp-txwzsdk-demo]  
> 腾讯位置服务牛逼  
> 腾讯位置服务文档小程序SDK ：[https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview][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_113428833]  
> 案例二：实现 运动轨迹记录 [https://blog.csdn.net/qq\_42027681/article/details/113429566][https_blog.csdn.net_qq_42027681_article_details_113429566]  
> 在线体验 （打不开的话可能在审核）  
> ![在这里插入图片描述][20210130124104560.jpg]

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

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>longitude</td> 
   <td>Number</td> 
   <td>经度</td> 
  </tr> 
  <tr> 
   <td>latitude</td> 
   <td>Number</td> 
   <td>纬度</td> 
  </tr> 
  <tr> 
   <td>scale</td> 
   <td>Number</td> 
   <td>缩放级别</td> 
  </tr> 
  <tr> 
   <td>markers</td> 
   <td>Array</td> 
   <td>标记的点</td> 
  </tr> 
  <tr> 
   <td>polyline</td> 
   <td>Array</td> 
   <td>地图轨迹</td> 
  </tr> 
  <tr> 
   <td>@regionchange</td> 
   <td>EventHandle</td> 
   <td>视野发生变化时触发</td> 
  </tr> 
  <tr> 
   <td>@tap</td> 
   <td>EventHandle</td> 
   <td>点击地图触发的事件</td> 
  </tr> 
 </tbody> 
</table>

### 整合腾讯位置服务SDK ###

*  注册位置服务账号
 *  引入SDK文件
 *  实例化核心功能类
 *   *  引入核心类
     *  实例化
 *  功能接入
 *   *  接入地点搜索
     *  关键词输入提醒
     *  逆地址解析(坐标转地址)
     *  地址解析(地址转坐标)
     *  路线规划
     *  距离计算
     *  获取城市列表
 *  视频预告

# 注册位置服务账号 #

只有注册了账号才能使用SDK服务  
注册地址 [https://lbs.qq.com?lbs\_invite=G9MRFLG][https_lbs.qq.com_lbs_invite_G9MRFLG]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]

注册完毕取控制台新建应用 开启Webservice服务

# 引入SDK文件 #

官网首页 [https://lbs.qq.com?lbs\_invite=G9MRFLG][https_lbs.qq.com_lbs_invite_G9MRFLG]  
可以去官网下载 [https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview][https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_jsSdkOverview]  
下载地址为 [https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip][https_mapapi.qq.com_web_miniprogram_JSSDK_qqmap-wx-jssdk1.2.zip]  
根目录下添加 common 文件夹  
![在这里插入图片描述][20210129231737360.png]

# 实例化核心功能类 #

## 引入核心类 ##

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

var QQMapWX = require('../../common/qqmap-wx-jssdk.js')

![在这里插入图片描述][20210129232229917.png]

## 实例化 ##

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

腾讯位置服务控制台获取 key  
![在这里插入图片描述][20210129232409861.png]

# 功能接入 #

官网首页 [https://lbs.qq.com?lbs\_invite=G9MRFLG][https_lbs.qq.com_lbs_invite_G9MRFLG]  
说明 : 详细接入可选参数和返回参数 请移步官网 [https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview][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)
    	}
    })

![在这里插入图片描述][20210129234801900.png]

![在这里插入图片描述][20210129233246949.png]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>longitude</td> 
   <td>Number</td> 
   <td>地点经度</td> 
  </tr> 
  <tr> 
   <td>latitude</td> 
   <td>Number</td> 
   <td>地点纬度</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>Str</td> 
   <td>地点名称</td> 
  </tr> 
  <tr> 
   <td>polygon</td> 
   <td>Array</td> 
   <td>地点形状</td> 
  </tr> 
  <tr> 
   <td>cricle</td> 
   <td>Array</td> 
   <td>圆属性</td> 
  </tr> 
  <tr> 
   <td>callout</td> 
   <td>Array</td> 
   <td>点击标记的显示属性</td> 
  </tr> 
 </tbody> 
</table>

## 关键词输入提醒 ##

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

![在这里插入图片描述][20210130123701650.png]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>location.lng</td> 
   <td>Number</td> 
   <td>地点经度</td> 
  </tr> 
  <tr> 
   <td>location.lat</td> 
   <td>Number</td> 
   <td>地点纬度</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>Str</td> 
   <td>地点名称</td> 
  </tr> 
  <tr> 
   <td>formatted_addresses.rough</td> 
   <td>Str</td> 
   <td>详细位置</td> 
  </tr> 
  <tr> 
   <td>address</td> 
   <td>Str</td> 
   <td>详细地址</td> 
  </tr> 
  <tr> 
   <td>category</td> 
   <td>Str</td> 
   <td>分类</td> 
  </tr> 
  <tr> 
   <td>address_component.nation</td> 
   <td>Str</td> 
   <td>国家地区</td> 
  </tr> 
  <tr> 
   <td>address_component.province</td> 
   <td>Str</td> 
   <td>省</td> 
  </tr> 
  <tr> 
   <td>address_component.city</td> 
   <td>Str</td> 
   <td>市</td> 
  </tr> 
  <tr> 
   <td>address_component.district</td> 
   <td>Str</td> 
   <td>区县</td> 
  </tr> 
  <tr> 
   <td>address_component.street</td> 
   <td>Str</td> 
   <td>街道</td> 
  </tr> 
  <tr> 
   <td>address_component.street_number</td> 
   <td>Str</td> 
   <td>门牌号</td> 
  </tr> 
  <tr> 
   <td>address_reference.town</td> 
   <td>Str</td> 
   <td>乡镇</td> 
  </tr> 
  <tr> 
   <td>address_reference.landmark_l2</td> 
   <td>Str</td> 
   <td>村落</td> 
  </tr> 
 </tbody> 
</table>

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

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>location.lng</td> 
   <td>Number</td> 
   <td>地点经度</td> 
  </tr> 
  <tr> 
   <td>location.lat</td> 
   <td>Number</td> 
   <td>地点纬度</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>Str</td> 
   <td>地点名称</td> 
  </tr> 
  <tr> 
   <td>formatted_addresses.rough</td> 
   <td>Str</td> 
   <td>详细位置</td> 
  </tr> 
  <tr> 
   <td>address</td> 
   <td>Str</td> 
   <td>详细地址</td> 
  </tr> 
  <tr> 
   <td>category</td> 
   <td>Str</td> 
   <td>分类</td> 
  </tr> 
  <tr> 
   <td>address_component.nation</td> 
   <td>Str</td> 
   <td>国家地区</td> 
  </tr> 
  <tr> 
   <td>address_component.province</td> 
   <td>Str</td> 
   <td>省</td> 
  </tr> 
  <tr> 
   <td>address_component.city</td> 
   <td>Str</td> 
   <td>市</td> 
  </tr> 
  <tr> 
   <td>address_component.district</td> 
   <td>Str</td> 
   <td>区县</td> 
  </tr> 
  <tr> 
   <td>address_component.street</td> 
   <td>Str</td> 
   <td>街道</td> 
  </tr> 
  <tr> 
   <td>address_component.street_number</td> 
   <td>Str</td> 
   <td>门牌号</td> 
  </tr> 
  <tr> 
   <td>ad_info.adcode</td> 
   <td>Str</td> 
   <td>地址编号</td> 
  </tr> 
  <tr> 
   <td>similarity</td> 
   <td>Str</td> 
   <td>输入地址与解析结果误差(文本相似度)</td> 
  </tr> 
  <tr> 
   <td>deviation</td> 
   <td>Str</td> 
   <td>误差距离</td> 
  </tr> 
  <tr> 
   <td>reliability</td> 
   <td>Str</td> 
   <td>可信度 越大越可信</td> 
  </tr> 
 </tbody> 
</table>

## 路线规划 ##

规划路线
    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)
    	}
    })

![在这里插入图片描述][2021013000063055.png]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>mode</td> 
   <td>Str</td> 
   <td>出行方式</td> 
  </tr> 
  <tr> 
   <td>distance</td> 
   <td>Number</td> 
   <td>距离</td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>Number</td> 
   <td>规划的时间(包括路况)</td> 
  </tr> 
  <tr> 
   <td>polyline</td> 
   <td>Array</td> 
   <td>地点路径</td> 
  </tr> 
 </tbody> 
</table>

## 距离计算 ##

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)
    	}
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>from</td> 
   <td>Obj</td> 
   <td>出发点</td> 
  </tr> 
  <tr> 
   <td>to</td> 
   <td>Obj</td> 
   <td>到达点</td> 
  </tr> 
  <tr> 
   <td>distance</td> 
   <td>Number</td> 
   <td>距离</td> 
  </tr> 
 </tbody> 
</table>

## 获取城市列表 ##

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

![在这里插入图片描述][20210130131600983.png]  
![在这里插入图片描述][20210130131724337.png]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>Str</td> 
   <td>城市编号</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>Str</td> 
   <td>城市简称</td> 
  </tr> 
  <tr> 
   <td>fullname</td> 
   <td>Str</td> 
   <td>城市全称</td> 
  </tr> 
  <tr> 
   <td>pinyin</td> 
   <td>Array</td> 
   <td>城市拼音</td> 
  </tr> 
  <tr> 
   <td>location.lng</td> 
   <td>Number</td> 
   <td>地点经度</td> 
  </tr> 
  <tr> 
   <td>location.lat</td> 
   <td>Number</td> 
   <td>地点纬度</td> 
  </tr> 
  <tr> 
   <td>cidx</td> 
   <td>Array</td> 
   <td>下级行政区在下个数组中的下标</td> 
  </tr> 
 </tbody> 
</table>

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

# 视频预告 #

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

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

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

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

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

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

[https_lbs.qq.com_lbs_invite_G9MRFLG]: https://lbs.qq.com?lbs_invite=G9MRFLG
[https_ext.dcloud.net.cn_plugin_id_4067]: https://ext.dcloud.net.cn/plugin?id=4067
[https_github.com_dmhsq_uniapp-txwzsdk-demo]: https://github.com/dmhsq/uniapp-txwzsdk-demo
[https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_jsSdkOverview]: 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/113428833
[https_blog.csdn.net_qq_42027681_article_details_113429566]: https://blog.csdn.net/qq_42027681/article/details/113429566
[20210130124104560.jpg]: /images/20221024/0582f8cef7a644caa4d18cc9f4a2e270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221024/f94d629216a24bffbd33c91d3807b85a.png
[https_mapapi.qq.com_web_miniprogram_JSSDK_qqmap-wx-jssdk1.2.zip]: https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip
[20210129231737360.png]: /images/20221024/d2fffa8e3393493bb0398469c4b368e3.png
[20210129232229917.png]: /images/20221024/6c3dc7479f234508846738de3424310d.png
[20210129232409861.png]: /images/20221024/fc8bfe7b189f44c3add1c356958da5fe.png
[20210129234801900.png]: /images/20221024/185d1033712e49e7b35a8ed8831a8870.png
[20210129233246949.png]: /images/20221024/97dedc4cef7842b68981eb9f875bc62c.png
[20210130123701650.png]: /images/20221024/9f0e87b3f7004e50a4a8e65d3611d8fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221024/14090498a7354b8fb0b1ef2aeca73e5f.png
[2021013000063055.png]: /images/20221024/fe29ffb35165422aad46917708de9070.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: /images/20221024/d24fc649ebb3462fa2d77e8b30628757.png
[20210130131600983.png]: /images/20221024/61a2388431374037928561a3555973da.png
[20210130131724337.png]: /images/20221024/d7468292977b4931ba75954ac0015270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: /images/20221024/3df3fa6239d64d6d961c459512f6ec84.png
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[https_cloud.tencent.com_developer_column_90853]: https://cloud.tencent.com/developer/column/90853
[20201110144238980.gif_pic_center]: /images/20221024/0188a54bea574e06a907c75792878b08.png
[Link 1]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/850ec68f95ae44839f6a89f64b8d077f.png