企业网站备案价格,网络搭建教程,悬浮网站右侧带鼠标经过二维码显示特效代码,上海网站建设管理系统一、高德地图
1.注册高德地图开放平台账号
#xff08;1#xff09;创建应用 这个key 第3步骤#xff0c;配置到项目中locationGps.js 2.下载高德地图微信小程序插件
#xff08;1#xff09;下载地址
高德地图API | 微信小程序插件 #xff08;2#xff09;引入项目…
一、高德地图
1.注册高德地图开放平台账号
1创建应用 这个key 第3步骤配置到项目中locationGps.js 2.下载高德地图微信小程序插件
1下载地址
高德地图API | 微信小程序插件 2引入项目中 3. 创建逆地理编码js文件
1locationGps.js
/** 使用第三方地图逆地址解析经纬度获取用户当前所在位置信息* param {Number} lat* param {Number} lng*/export const getUserCurrentLocationInfo (lat, lng) {var GDMapWX require(../assets/GD/amap-wx.130.js);var GDMapSdk new GDMapWX.AMapWX({key: // 必填 高德应用key});return new Promise((resolve, reject) {GDMapSdk.getRegeo({location: lng , lat,success: res {if (res res.length 0) {resolve(res); // 确保返回的结果是一个数组} else {reject(No data returned);}},fail: function(error) {reject(error);}});});
}
2存放位置 4. 前端代码
script
import {getUserCurrentLocationInfo
} from /utils/locationGps.js; // 引入函数data(){return {latitude: 0, // 纬度范围为-90~90负数表示南纬使用 gcj02 国测局坐标系longitude: 0, // 经度范围为-180~180负数表示西经使用 gcj02 国测局坐标系city: ,address: ,}}methods:{// 定位getLocation() {// 使用 uni.getLocation 获取经纬度uni.getLocation({type: gcj02, // 使用国测局坐标系 wgs84success: (res) {console.log(经度, res.longitude);console.log(纬度, res.latitude);console.log(速度, res.speed);console.log(精度, res.accuracy);this.latitude res.latitude;this.longitude res.longitude;this.getLocationInfo(res.latitude, res.longitude); },fail: (err) {console.error(获取位置失败, err);}});},// 使用高德地图 API 进行逆地理编码getLocationInfo(lat, lng) {getUserCurrentLocationInfo(lat, lng).then((res) {this.city res[0].regeocodeData.addressComponent.city || res[0].regeocodeData.addressComponent.province;this.address res[0].regeocodeData.formatted_address;console.log(城市, this.city);console.log(详细地址, this.address);}).catch((error) {console.error(逆地理编码失败, error);});},},mounted() {this.getLocation();},
二、腾讯地图
1.注册腾讯地图开放平台账号
1创建应用
腾讯地图开放平台 2前端代码
将应用key配置到前端代码中
templateviewview classtitle当前位置text stylefont-weight: bold;{{address}}/text/viewbutton clicklocationn点击获取当前位置/button/view
/templatescriptexport default {data() {return {longitude: null,latitude: null,address: }},onLoad() {this.location()},methods: {location() {var thatthisuni.getFuzzyLocation({success: function(res) {that.longituderes.longitudethat.latituderes.latitude},});},locationn() {console.log(this.longitude)console.log(this.latitude)uni.request({url: https://apis.map.qq.com/ws/geocoder/v1/?location${encodeURIComponent(this.latitude)},${encodeURIComponent(this.longitude)}keyE7XBZ-FUXC7-D22XZ-POFT7-OD5LJ-6RBAVget_poi1,method: GET,success: (res) {console.log(res)this.addressres.data.result.ad_info.city}})}}}
/scriptstyle.title {display: inline-block;margin: 20px;font-size: 20px;}
/style
在onLoad生命周期函数中调用getFuzzyLocation方法来获取经纬度
再把经纬度赋给data的数据中触发调用腾讯地图API把我想要的值赋给address最后在template中进行显示。
备注
需要再项目manifest.json中mp-weixin节点配置requiredPrivateInfos和permission。 在调用 uni.getFuzzyLocation 之前确保请求用户授权获取位置信息否则你会遇到如下提示 微信开发者工具自带的getLocation就可以实现上述效果但是申请没有getFuzzyLocation好申请腾讯地图API中也可以根据当前IP地址来进行调用。
