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

代码哈士奇 等级 472 0 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 在线体验 uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用

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

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

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

@TOC

注册位置服务账号

只有注册了账号才能使用SDK服务 注册地址 https://lbs.qq.com?lbs_invite=G9MRFLG

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

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

引入SDK文件

官网首页 https://lbs.qq.com?lbs_invite=G9MRFLG 可以去官网下载 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 下载地址为 https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip 根目录下添加 common 文件夹 uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用

实例化核心功能类

引入核心类

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

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

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

实例化

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

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

功能接入

官网首页 https://lbs.qq.com?lbs_invite=G9MRFLG 说明 : 详细接入可选参数和返回参数 请移步官网 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)
    }
})

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

uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用 属性 | 类型 | 作用 |
-------- | ----- |-------- 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)
    }
})

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

属性 类型 作用
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)
    }
})

uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用 属性 | 类型 | 作用 |
-------- | ----- |-------- 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)
    }
})

uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用 属性 | 类型 | 作用 |
-------- | ----- |-------- 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)
    }
})

uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用 属性 | 类型 | 作用 |
-------- | ----- |-------- from | Obj | 出发点 to | Obj | 到达点 distance |Number | 距离



获取城市列表

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

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

属性 类型 作用
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(vue通用)整合腾讯位置服务SDK---多平台小程序通用









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

未经本人允许,禁止转载

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


后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:974178910

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

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
uniapp中使用vue-i18n实现国际化多语言
uniapp的项目中 需要用到国际化切换 做一个总结 1. 首先看一下目录结构 2. 准备好vuei18n的js文件(下方有源码地址) 3. la
Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗?
有关系吗? 没关系, 面试的时候总会问如何在Vue的实例上挂载一个方法/属性, 也就是Vue.prototype的小技巧, 但是突然有人问他俩有啥关系还真是新鲜. (https://imghelloworld.osscnbeijing.aliyuncs.com/8accd67b8a68646ac4d99fd7297e0fbc
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用
专属邀请链接 这里进入腾讯位置服务官网: https://lbs.qq.com?lbs_inviteG9MRFLG(https://lbs.qq.com?lbs_inviteG9MRFLG) 项目开始于20210127 晚8 uniapp模板地址 https://ext.dcloud.net.cn/plugin?id4067(htt
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)(https://www.zhihu.com/people/huobodexiaobaiyang).css1cd9gw4{marginleft:.3em;}545 人赞同了该文章前言
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d