uniapp 之使用高德地图的方法将经纬度转为地址

前言

第一步

第二步

第三步

前言

因项目上的需要，需定位显示自己的位置

我之前一直坚持只使用 uniapp 内置的map属性去完成，却没成想，还是要依赖于高德地图才能将经纬度转为地址，之前也看过很多文章，最终实现了，给大家分享下

第一步

先去高德地图申请key

选微信小程序

最重要的一步就是点击相关下载下载 amap文件地址在上面的高德地图中

第二步

下载成功后

选择自己需要的，并把它放在项目中

第三步

前置工作做好了，那下面就是代码

 <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" scale="18"show-location="true"></map>先引入 下载后的文件import amap from '../../components/amap-wx.130.js'data 里 定义latitude: '',longitude: '',key: '7ae9ca9。。。。。', （前面申请的key）amapPlugin: null,

 onLoad() {this.amapPlugin = new amap.AMapWX({key: this.key});this.chooseSpot()},methods里定义// 高德地图的方法，获取地址chooseSpot() {this.amapPlugin.getRegeo({success: (data) => {// console.log(data, '高德地图');this.latitude = data[0].latitude// console.log(this.latitude);this.longitude = data[0].longitude// console.log(this.longitude);this.city = data[0].regeocodeData.addressComponent.districtconsole.log(this.city, 'this。city');this.getStationList()}});},

this.getStationList() 把自己的经纬度传递给后面的请求，最开始不知道是怎么写的，它总是先执行后面的请求，不先打印 // console.log(data, '高德地图'); 最后，我使用这种方法，它可以先打印了，后发送请求，都是慢慢摸索的过程，写篇文章记录下

 // 发送请求async getStationList() {console.log(this.longitude);console.log(this.latitude, this.longitude, '参数');console.log(this.stationLat, 'stationLat', 'home信息的经纬度111'); //const {data: {obj,msg,resCode}} = await uni.$http.post('/uniapp/。。。', {pageSize: this.pageSize,pageNum: this.pageNum,stationLng: this.longitude,stationLat: this.latitude})console.log(obj, msg, resCode,);if (resCode !== "00100000") return uni.$showMsg()}

后续

因不小心动了配置文件 - manifest.json 导致地图现在报

a.fail is not a function

以及 getStorage:fail data not found

后面在全局文件搜索 getStorage 找到位置并打印

getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json

api需要在app.json/ext.json中的requiredPrivateInfos字段中声明

解决

1.先在微信小程序配置这项选择位置接口以及填入描述

2.填入成功之后会自动生成下面代码

则直接在它后面加入 requiredPrivateInfos 以及配置内容

 "permission": {"scope.userLocation": {"desc": "获取用户位置"}},"requiredPrivateInfos": ["getLocation","onLocationChange","startLocationUpdateBackground","chooseAddress"]

uniapp 之使用高德地图的方法将经纬度转为地址相关推荐

Uniapp中使用高德地图，并在android studio中离线打包
Uniapp中使用高德地图,并在android studio中离线打包带高德地图功能的Uniapp的android离线打包 1. Uniapp中使用高德地图的方式 2. 高德地图中申请key 3. ...
java实现高德地图app,Android 高德地图入门demo，最新高德地图实现方法，附源码及apk...
[实例简介] Android 高德地图入门demo,最新高德地图实现方法,附源码及apk [实例截图] [核心代码] GaoDeDemo ├── GaoDeDemo │ ├── app │ │ ...
百度地图AK申请注意+百度地图API生成热力图+调用百度地图API自动获取经纬度和地址
文章目录一.百度地图AK密钥申请二.调用百度地图API生成热力图三.调用百度地图API自动获取经纬度和地址一.百度地图AK密钥申请点击百度地图API控制台,输入登录账户,即可进入,若账户未完 ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
uniapp打包后高德地图定位失败解决
1.上网搜高德地图控制台,注册后创建应用配置,得到uniapp的manifest.json中的map模块的key 2.小制作建议在手机应用市场查找相关的软件来获取包名和SHA1,非常方便
雷凌linux车机升级_丰田雷凌原车高德地图升级方法（附说明）
丰田雷凌原厂导航的地图用的是高德地图离线版,升级方法是将地图卡插上连网的电脑上手动更新.地图卡插上电脑后,卡的根目录下有两个升级文件:"导航地图升级下载工具Win版.exe"和&q ...
uniapp使用H5高德地图
uniapp有自带的map组件 map- uni-app官网 map组件兼容了大多数的凭条,但是注意 - map只是展示与定位不一样,定位uniapp有自己的api 在注意事项中,uniapp官网提到 ...
uniapp h5 引入高德地图
因地图收费.uniapp h5 是腾讯地图,公司为了少交一份钱,就改为引入高德地图我才用是模板引入js 首先在项目跟根目录添加index.html <!DOCTYPE html> < ...
uni-app如何使用高德地图获取经纬度
高德官方文档:准备-入门-教程-地图 JS API v2.0|高德地图API (amap.com) 首先按照链接步骤获取key 两种使用方式.注意:选其一.不可两者同时使用第一种:loadScrip ...

uniapp 之使用高德地图的方法将经纬度转为地址

前言

第一步

第二步

第三步

后续

解决

uniapp 之使用高德地图的方法将经纬度转为地址相关推荐

最新文章

热门文章

uniapp 之 使用高德地图的方法将经纬度转为地址

前言

第一步

第二步

第三步

后续

解决

uniapp 之 使用高德地图的方法将经纬度转为地址相关推荐

最新文章

热门文章

uniapp 之使用高德地图的方法将经纬度转为地址

uniapp 之使用高德地图的方法将经纬度转为地址相关推荐