腾讯位置服务–微信小程序JSSDK地图开发

1、腾讯位置服务
文档传送门：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

【源码在最后，key值和 JavaScriptSDK v1.2文件需要在官网中申请和下载】

官方开发流程大致如下：
1）准备工作

1、申请key值，选择WebServiceAPI，配置小程序appID

2、添加request合法域名

3、下载 JavaScriptSDK v1.2文件

4、小程序示例引入

【总结】：该方法用于不需要打开地图直接获取地理位置信息，而需要打开地图获取地理位置信息，则直接用微信小程序的API即可实现【wx.getLocation , wx.openLocation , wx.chooseLocation】，与JSSDK引入的区别就是，无法获取省市区，具有特征标志(公交站/医院)周边信息

2）在小程序对应页面引入

1）微信小程序的API接口实现【wx.getLocation , wx.openLocation , wx.chooseLocation】

2）JSSDK引入接口实现

3)传入申请好的key值，每个应用的地图只能用一个key，不能重复使用，需要自己生成才能用JSSDK地图，上文已讲述获取key的方法

4）以搜索周边酒店为例子，keyword可以自己传

效果为：

1）wxml文件

<!-- 这是地图部分 -->
<view class="map_container"><map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' show-location='true'subkey="CATBZ-K5KK3-DPY3Q-3YIBL-NI4KH-5VBN4" bindtap='getLonAndLat'></map>
</view><!-- JSSDK核心类操作 -->
<view class="location-operation padding"><!-- 获取当前位置信息 --><view><view class="font-12-thin">经度：{{longitude}}； 纬度：{{latitude}}；</view><view class="font-12-thin">地址：{{address}}； <text wx:if="{{name !=''}}">店名：{{name}}；</text></view></view><!-- 输入经纬度获取当前位置信息 --><view class="flex-box-start margin-top"><view>经纬度：</view><view><input placeholder="经度" class="latlon-input" type="number" placeholder-class="placeholder-class"value="{{lonValue}}" bindinput="inputLon" /></view><view><input placeholder="纬度" class="latlon-input" type="number" placeholder-class="placeholder-class"value="{{latValue}}" bindinput="inputLat" /></view><view class="location-btn" bindtap="lonLatBtn">搜索</view></view><!-- 获取当前定位 --><view class="flex-box-start margin-top"><view class="location-text">地图位置：{{province}}-{{city}}-{{district}}</view><view class="location-btn" bindtap="getLocation">定位</view></view><!-- 搜索框输入搜索 --><view class="flex-box-start margin-top"><view>搜索框搜索：</view><view class="search-input"><input placeholder="请输入搜索值" class="input-css" type="text" placeholder-class="placeholder-class"value="{{searchValue}}" bindinput="searchInput" /></view><view class="location-btn" bindtap="searchBtn">搜索</view></view><!-- 搜索周边信息 --><view class="flex-box-start margin-top"><view>快捷周边搜索：</view><view class="{{ searchIndex == index?'choose-search-text':'unchoose-search-text'}} search-text"wx:for="{{shopsAroundList}}" wx:key='index' data-item='{{item}}' bindtap="clickSearchText" data-index="{{index}}">{{item.text}}</view></view>
</view>

2）js文件

const app = getApp()
const filter = app.commModule.filter //路由守卫
const common = app.commModule.common //公共方法
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../../sdk/qqmap-wx-jssdk.js');
var qqmapsdk;
Page(filter({data: {latitude: 34.752465,longitude: 113.6653,accuracy: 0, //位置的精度  113.6653,34.752465scale: 15, //缩放级别province: '河南省', //省份city: '郑州市', //城市  district: '二七区', //区 street : '正兴街' , //街道address:'河南省郑州市二七区正兴街', //地址name:'', //店名lonValue :'', //输入的经度latValue :'' , //输入的纬度shopsAroundList: [{id: 0,text: '酒店'},{id: 1,text: '餐饮'},{id: 2,text: '娱乐'},{id: 3,text: '学校'},{id: 4,text: '医院'},], //周边商店列表searchValue: '', //搜索框输入值searchIndex: 0, //快捷搜索选中的默认值//controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件（更新一下,即将废弃，建议使用 cover-view 代替）)/*     controls: [{id: 1,iconPath: '../../../../../static/add.png',position: {left: 15,top: 260,width: 40,height: 40},clickable: true}], *//*     markers:[{callout: {content: '腾讯总部大楼',padding: 10,borderRadius: 2,display: 'ALWAYS'},latitude: 40.040415,longitude: 116.273511,iconPath: '../../../../../static/add.png',width: '34px',height: '34px',rotate: 0,alpha: 1},], *///distanceArr: []},//key 为  每个应用的地图只能用一个key，不能重复使用，需要自己生成才能用JSSDK地图onLoad: function () {//获取定位的地理位置文字qqmapsdk = new QQMapWX({key: '每个应用的地图只能用一个key，不能重复使用，需要自己生成才能用JSSDK地图 ， 上文已讲述获取key的方法'});//获取当前地位的经纬度//this.getLocation()},onShow: function () {// 调用接口//this.searchLocation()//this.getCityList()//this.getDistrictByCityId()},/*** @description: 点击地图获取选取位置的经纬度* @return {获取选取位置的 longitude:经度  latitude:纬度 }**/getLonAndLat:function(ele){console.log(ele)let that = thisthat.setData({longitude : ele.detail.longitude,latitude : ele.detail.latitude})//that.getCurrentLocation()that.getCurrentLocation(ele.detail.longitude,ele.detail.latitude)},/*** @description: 获取当前的地理位置* @return {获取当前位置的 longitude:经度  latitude:纬度 }**/getLocation: function () {let that = thiswx.getLocation({type: 'gcj02', //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标isHighAccuracy: true,highAccuracyExpireTime: 3500, //高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果success(res) {console.log(res)if (res.errMsg == "getLocation:ok") {that.getCurrentLocation(res.longitude, res.latitude) //选择当前位置的信息that.setData({longitude: res.longitude,latitude: res.latitude,})} else {common.errorMsg('定位请求失败！')}},fail: function (res) {common.errorMsg('请检查网络以及GPS定位是否开启')setTimeout(() => {wx.navigateBack()}, 1500)}})},/*** @description: 打开所在经纬度的位置的地图* @param {经度}  longitude* @param {纬度}  latitude* @return {获取传递的经纬度的地图 }**/openLocation: function (longitude, latitude) {wx.openLocation({longitude: longitude,latitude: latitude,name: '地址', //定位地址名称scale: 28, //缩放比例type: 'gcj02', //定位类型})},/*** @description: 打开地图选择位置,只有点击确定的收触发* @param {经度}  longitude* @param {纬度}  latitude* @return {获取  adresss：地址； name:店名；  longitude:经度  latitude:纬度  }**/chooseLocation: function (longitude, latitude) {let that = thiswx.chooseLocation({longitude: longitude,latitude: latitude,success: function (res) {console.log(res)if (res.errMsg == "chooseLocation:ok") {that.getPageData(res)wx.navigateBack()} else {common.errorMsg('选取位置失败')wx.navigateBack()}},fail: function (res) {common.errorMsg('选取位置失败')wx.navigateBack()}})},/*** @description: 获取前一个页面，并给前一个页面赋值* @param {传入请求成功的res}  res* @return {给前一个页面赋值  adresss：地址； name:店名；  longitude:经度  latitude:纬度  }**/getPageData: function (res) {let pages = getCurrentPages();let prevPage = pages[pages.length - 2];//给前一页赋值prevPage.setData({longitude: res.longitude, //经度latitude: res.latitude, //纬度address: res.address, //地址name: res.name, //店名})},/*** @description: 引入地图JSSDK,实现搜索地图周边，不传递location对象是根据当前位置* @param {搜索值}  keyword* @param {经度}  longitude* @param {纬度}  latitude* @return {获取  province：省； city:市；  district:区 等 }**/searchLocation: function (keyword, longitude, latitude) {let that = thisqqmapsdk.search({location: {longitude: longitude || that.data.longitude,latitude: latitude || that.data.latitude},keyword: keyword, //输入的搜索关键字success: function (res) {console.log(res);},fail: function (res) {console.log(res);},/*       complete: function (res) {console.log(res);} */})},// 获取当前地理位置/*** @description: 使用经纬度解析出当前地理位置文字信息* @param {经度}  longitude* @param {纬度}  latitude* @return {获取  province：省； city:市；  district:区 等 }**/getCurrentLocation: function (longitude, latitude) {let that = this;qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {console.log(res)if (res.message == "query ok") {let result = res.result.ad_infolet address = res.result.addressthat.setData({province: result.province,city: result.city,district: result.district,street　: result.street,address : address,})} else {common.errorMsg('获取当前地点位置失败！')}},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});},/*** @description: 获取城市列表* @return {返回全国城市列表}**/getCityList: function () {let that = this;//调用获取城市列表接口qqmapsdk.getCityList({success: function (res) { //成功后的回调console.log(res);console.log('省份数据：', res.result[0]); //打印省份数据console.log('城市数据：', res.result[1]); //打印城市数据console.log('区县数据：', res.result[2]); //打印区县数据},fail: function (error) {console.error(error);},complete: function (res) {console.log(res);}});},/*** @description: 获取城市区县* @param {城市列表id}  id* @return {返回全国城市列表 }**/getDistrictByCityId: function (id) {let that = this;//调用获取城市列表接口qqmapsdk.getCityList({success: function (res) { //成功后的回调console.log(res);console.log('省份数据：', res.result[0])var city = res.result[0];//根据对应接口getCityList返回数据的Id获取区县数据（以北京为例）qqmapsdk.getDistrictByCityId({// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推id: id || city[0].id, //对应接口getCityList返回数据的Id，如：北京是'110000'success: function (res) { //成功后的回调console.log(res);console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);},fail: function (error) {console.error(error);},complete: function (res) {console.log(res);}});},fail: function (error) {console.error(error);},complete: function (res) {console.log(res);}});},//经纬度搜索输入inputLon:function(ele){var e = ele.detail.valuethis.setData({lonValue : e})},//纬度搜索框输入inputLat:function(ele){var e = ele.detail.valuethis.setData({latValue : e})},//经纬度搜索地址按钮lonLatBtn: function(){let lon = this.data.lonValuelet lat = this.data.latValueif(lon !='' && lat !='' && lat<90){this.getCurrentLocation(this.data.lonValue,this.data.latValue)}else{common.errorMsg('请输入正确的经纬度')}},//搜索输入框searchInput: function (ele) {let that = thisvar e = ele.detail.valueconsole.log(e)that.setData({searchValue: e})},//搜索框按钮--搜索searchBtn: function () {let that = thisthat.searchLocation(that.data.searchValue)},//快捷搜索clickSearchText: function (ele) {let that = thislet item = ele.currentTarget.dataset.itemlet index = ele.currentTarget.dataset.indexthat.setData({searchIndex: index,})that.searchLocation(item.text)}}))

3）wxss文件

page{font-size: 32rpx;
}
.map_container {height: 50vh;width: 100%;
}
.map {height: 100%;width: 100%;
}
.location-btn{margin-left: 20rpx;padding: 4rpx 12rpx;border: solid 1rpx rgb(255,179,26);color: rgb(255,179,26);border-radius: 8rpx;
}.input-css{padding: 4rpx 10rpx;background:#DCDCDC;
}.search-text{margin-right: 20rpx;
}.choose-search-text{color: rgb(255,179,26);
}
.unchoose-search-text{color: #333333;
}.latlon-input{width: 180rpx;border-bottom: solid 1rpx #999999;margin-right: 20rpx;
}

完结散花…

下一章：讲解小程序JSSDK在城市列表中的应用

腾讯位置服务--微信小程序JSSDK地图开发相关推荐

腾讯位置服务+微信小程序，一文告诉你程序员为什么不会坐过站！
引言 1.1「腾讯位置服务」是什么? 立足生态,连接未来腾讯位置服务平台依托庞大的数据生态,以定位.地图展示.地点搜索.路线规划.导航.室内图.海外图等位置服务能力和LBS大数据能力为基础,面向开发 ...
腾讯位置服务----＞(小程序简单使用+显示附近WC步行路线)
体验腾讯位置服务功能,请请点击下方链接 https://lbs.qq.com?lbs_invite=9QNIFL9 1.申请Key: 地址:点击此连接登录注册申请Key 2.设置域名: 小程序管理后台 ...
uni-app中使用腾讯位置服务实现小程序地图选点功能
文章目录 1. 官方文档 2. 小程序添加插件 3. HBuilder配置 4. 配置代码 5. 页面代码 1. 官方文档技术选定(地图选点插件) (对应官网:https://lbs.qq.com/ ...
【小5聊】腾讯位置服务之小程序简单使用以及显示附近WC步行路线
[一起来体验腾讯位置服务功能吧] 结合自己小程序业务,集成腾讯位置服务地图功能还是不错的,推荐各位同行提前体验和使用点击我快速报名体验吧 [前言] 第一次使用腾讯位置服务也算是挺早的,当时是在web ...
计算机毕业设计Python+uniapp校园服务微信小程序(小程序+源码+LW)
计算机毕业设计Python+uniapp校园服务微信小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ pyth ...
微服务+微信小程序实现社区服务
微服务+微信小程序实现社区服务前言我在上大学的时候毕业设计做的是微服务SpringCloud结合微信小程序实现一个提供一些生活服务的微信小程序,它主要可以提供豆瓣电影资讯.热点新闻.天气预报.停车 ...
适合大学生的创业项目校园综合跑腿服务微信小程序kyuan源码
介绍: 门槛:需自备服务器和备案过的域名,推荐2核4G服务器,最低配置要求1核2G 一. 服务端部署教程: 1.安装宝塔面板.脚本: yum install -y wget && wg ...
腾讯视频嵌入微信小程序
腾讯视频嵌入微信小程序 1.登录微信公众平台 2.设置-第三方设置 3.添加插件-搜索腾讯视频-选中-添加 4.写代码文档地址: https://mp.weixin.qq.com/wxopen/pl ...
校园服务小程序源代码分享园服务微信小程序全开源版源码-包含服务端
2021年4月17日更新严正声明: [请一定勿将程序用户商业用途且包括用此程序去参加各类学校的竞赛或者其他以获取名利而参与的竞赛等,一旦被原作者发现将会面临严重的侵权责任后果,特别是被获奖后会遭 ...

腾讯位置服务--微信小程序JSSDK地图开发

腾讯位置服务–微信小程序JSSDK地图开发

腾讯位置服务--微信小程序JSSDK地图开发相关推荐

最新文章

热门文章