2017优秀网站设计,如何查看vs中建设好的网站,佛山公司注册网页,天津室内设计公司排名高德地图官方是这样介绍的使用方法可以参考#xff1a;入门指南-微信小程序插件 | 高德地图API
我再介绍一下我得具体应用。
1#xff0c;首先要在申请高德地图开放平台得账号。然后在这个账号中申请一个应用。类型选择微信小程序。
我的应用 | 高德控制台
获取Key-创建工… 高德地图官方是这样介绍的使用方法可以参考入门指南-微信小程序插件 | 高德地图API
我再介绍一下我得具体应用。
1首先要在申请高德地图开放平台得账号。然后在这个账号中申请一个应用。类型选择微信小程序。
我的应用 | 高德控制台
获取Key-创建工程-开发指南-微信小程序插件 | 高德地图API 点击提交我们就得到一个可以看的key得应用啦。 3然后去相关下载-微信小程序插件 | 高德地图API 下载之后你会得到一个压缩文件解压缩后得到一个amap-wx.130.js。把他放到自己的项目里面。
4
因为他最后是通过
module.exports.AMapWXAMapWX;得方式导出的。如果在vue3项目种我们通过var amapFile require(/js_sdk/amap/amap-wx.130.js);得方式引入他会报错
vendor.js? [sm]:2643 Error: module components/get-location//js_sdk/amap/amap-wx.130.js is not defined, require args is /js_sdk/amap/amap-wx.130.js 于是我修改了amap-wx.130.js得导出方式。把module.exports.AMapWXAMapWX;改成export default{ AMapWX }; 然后引入方式改成import就可以了。
import {onLoad, onInit, onShow} from dcloudio/uni-app;
import {ref} from vue; import amapFile from /js_sdk/amap/amap-wx.130.js
const nowCity ref();onLoad((options: any) {checkauthorize();
}) const checkauthorize () {uni.getSetting({success(res) {if (!res.authSetting[scope.userLocation]) {uni.authorize({scope: scope.userLocation,success: () { //这里是用户同意授权后的回调getLocation();},fail: () { //这里是用户拒绝授权后的回调rejectSetting()}})} else { //用户已经授权过了getLocation();}}})
}const getLocation () {uni.getLocation({type: wgs84,success: function (res) {console.log(res)console.log(经度 res.longitude);console.log(纬度 res.latitude);getAddress(res.latitude,res.longitude);}});
}//经纬度转换成省市区 latitude纬度long经度
const getAddress(latitude, longitude){let myAmapFun new amapFile.AMapWX({ key: 高德地图的key值 });myAmapFun.getRegeo({location: longitude , latitude ,//location的格式为经度,纬度success: function (data) {console.log(转换成省市,data);let {province,city,district} data[0].regeocodeData.addressComponent;city (city || city?.length0) ? city:;console.log(city)nowCity.valuecity;uni.setStorageSync(city,nowCity.value)console.log(省市区,provincecitydistrict)},fail: function (info) { }})
}//用户拒绝授权后的回调
const rejectSetting () {var that this;uni.showModal({title: 警告,content: 授权失败请打开位置消息授权,success: (res) {if (res.confirm) { //去授权toOpenSetting();} else if (res.cancel) {//用户点击取消console.log(res);uni.showModal({title: 提示,content: 获取权限失败将无法获取定位哦~,showCancel: false,success: (res) {toOpenSetting();}})}}})
}
//打开微信设置页面
const toOpenSetting () {uni.openSetting({success: (e) {console.log(e);}})
} 同时还有一些地方要改。
1首先微信开放平台得小程序后台设置种。开发管理-接口权限。开通获取当前的地理位置。
因为这个小程序的类目不在申请的列表里。所以下图显示的是没有权限。如果你也是这样的情况可以先去添加小程序的类目首页-小程序类目-查看详情 2开发管理-开发设置里面添加request合法域名 https://restapi.amap.com 3.代码里面要添加manifest.json里面加 permission : {scope.userLocation : {desc : 展示位置}
} 4.代码里面。page.json在使用地图的页面加上 permission: {scope.userLocation: {desc: 你的位置信息将用于小程序位置接口的效果展示}
} 小程序中回调起询问会话框。点击确定就能获取地理位置了
