网站设计需要那些模块,娄底网站建设网站,济南网站建设找老兵,深圳外贸10强公司1.应用场景#xff1a;展示公司位置#xff0c;并打开第三方app#xff08;高德#xff0c;腾讯#xff09;导航到目标位置。
#xff08;1#xff09;展示位置地图 uniapp官网提供了相关组件#xff0c;uniapp-map组件https://uniapp.dcloud.net.cn/component/map.ht…1.应用场景展示公司位置并打开第三方app高德腾讯导航到目标位置。
1展示位置地图 uniapp官网提供了相关组件uniapp-map组件https://uniapp.dcloud.net.cn/component/map.html#
具体用法
html结构
map stylewidth: 100%; height: 300px; :latitudestartposition.lat :longitudestartposition.lng :markerscovers markertapopenMap tapopenMap
/map data数据 startposition: {lat: 32.631379,//维度lng: 116.833490,//经度},covers: [{id: 1,latitude: 32.631379,longitude: 116.833490,iconPath: ../../static/位置.png,width: 50rpx,height: 50rpx,label: {content: 位置,color: #fff,fontSize: 12,borderRadius: 5,padding: 5,textAlign: center,bgColor: #2979ff,},}],address:定位中..... 2打开第三方软件 js方法uni.openLocation()https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation用于唤起第三方软件真机测试有效 // 打开的点击事件 传经纬度和地点名openMap() {// 打开第三方 小程序uni.openLocation({latitude: Number(this.startposition.lat),longitude: Number(this.startposition.lng),success: function() {console.log(success);},fail: (error) {console.log(error);}});},
2.应用场景软件初始定位 uniapp提供的apiuni.getLocation(OBJECT)https://uniapp.dcloud.net.cn/api/location/location.html在微信端只能获取到经纬度无法获取到详细中文地址所以官方推荐使用第三方库这里我使用的是腾讯地图简单方便。
1注册腾讯地图申请key
打开微信小程序JavaScript SDK地址https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview根据官网教程注册 2实现初始化当前定位信息
html部分
view当前位置{{address}}/view
data数据
address:定位中..... 函数部分 import QQMapWX from ../tx/qqmap-wx-jssdk.js;onLoad() {// 实例化API核心类let qqmapsdk new QQMapWX({key: 你自己获取到的KEY});qqmapsdk.reverseGeocoder({success: (res) {console.log(res);this.addressres.result.address}})},
注意import引入的路径为你下载的js文件路径
3.当前定位不准确或者需要重新选择定位位置如改变收获地址等... 实现该功能异常简单直接使用uniapp提供的方法uni.chooseLocation(OBJECT)https://uniapp.dcloud.net.cn/api/location/location.html#chooselocation
实例代码
uni.chooseLocation({success: function (res) {console.log(位置名称 res.name);console.log(详细地址 res.address);console.log(纬度 res.latitude);console.log(经度 res.longitude);}
});
4.开启定位需要的配置 manifest.json需要在mp-weixi中添加代码 permission: {scope.userLocation: {desc: 位置信息效果展示}},requiredPrivateInfos: [chooseLocation, getLocation] 也可以在配置中更改
