uniapp获取当前位置和经纬度信息(app端高德地图)

一、代码部分

1.1. 获取当前位置和经纬度信息(需要配置高的SDK)

调用uni-app官方API中的uni.chooseLocation(),即打开地图选择位置。

<button @click="getAddress">获取定位</button>
const getAddress = () => {
	uni.chooseLocation({
		success: res => {
			console.log(res);
			console.log('位置名称:' + res.name);
			console.log('详细地址:' + res.address);
			console.log('纬度:' + res.latitude);
			console.log('经度:' + res.longitude);
		}
	});
}
  • res打印结果如下
{
    "name": "雨花街道民智路12-5号南京证大喜玛拉雅中心",
    "latitude": 31.964383,
    "longitude": 118.804811,
    "address": "江苏省南京市雨花台区雨花街道民智路12-5号南京证大喜玛拉雅中心",
    "errMsg": "chooseLocation:ok"
}

1.2. 如果只是简单获取经纬度信息uni.getLocation即可满足条件

const getAddress = () => {
	uni.getLocation({
		type: 'wgs84',
		success: function(res) {
			console.log(res);
		},
		fail: function(error) {
			console.error('获取位置失败:', error);
		}
	});
}
  • res打印结果如下
{
    "type": "wgs84",
    "altitude": 0,
    "latitude": 31.966442,
    "longitude": 118.799641,
    "speed": 0.036327,
    "accuracy": 32,
    "errMsg": "getLocation:ok"
}

1.3. 如果需要获取省市区以及区域编码(需要配置高的SDK)

// 获取经纬度 省市区 详细地址
const chooseLocation = () => {
	uni.getLocation({
	    // gcj02 返回国测局坐标(App 和 H5 需配置定位 SDK 信息才可支持 gcj02。)
		type: 'gcj02', 
		// 是否解析地址信息(仅App平台支持(安卓需指定 type 为 gcj02 并配置三方定位SDK))
		geocode: true, 
		success: function(res) {
			console.log(res);
		}
	});
}
  • res打印结果如下
{
    "type": "gcj02",
    "altitude": 0,
    "latitude": 31.96437,
    "longitude": 118.804836,
    "speed": 0,
    "accuracy": 34,
    "address": {
        "country": "中国",
        "province": "江苏省",
        "city": "南京市",
        "district": "雨花台区",
        "street": "民智路",
        "streetNum": "12-2号",
        "poiName": "喜玛拉雅中心C座",
        "cityCode": "025"
    },
    "errMsg": "getLocation:ok"
}

二、生成高德地图的key

在这里插入图片描述

  • 创建新应用,添加key
  • 选择Android平台的话需要多填写一个SHA1安全码的信息,iOS不需要填写。

在这里插入图片描述

2.1. 发布版安全码SHA1如何获取

  • 参考如下地址:

https://blog.csdn.net/qq_44741577/article/details/139090838?spm=1001.2014.3001.5501

2.2. 包名如何获取

  • uniapp->发行->原生App云打包

在这里插入图片描述

  • 这里就看到了
    在这里插入图片描述

2.3. 信息填好,提交就获取到了key。

在这里插入图片描述

三、模块配置

3.1. 配置Geolocation(定位)

  • 我这里不需要ios的定位

在这里插入图片描述

3.1.1. 如何获取高德用户名

  • 找到个人中心
    在这里插入图片描述

  • 用户名如下
    在这里插入图片描述

3.2. Maps(地图)配置

这里的ios的key我没生成(需要苹果系统),但是配置文件又是必填,我瞎写了一个,不影响Android端使用

在这里插入图片描述

四、解决uniapp打包后uni.chooseLocation调用地址列表空白并转圈,搜索框无反应

4.1. 如果是使用云端证书

注意:

  • 必须保证在生成高德key的时候,发布版的SHA1的值和Dcloud项目云端证书的的SHA1的值相同,否则打包好的app,打开地图会一直处在加载中的状态
  • 必须保证高德地图申请key的包名和uniapp打包时的包名一致。

4.2. 如果是使用自有证书

  • 要获取如下三个信息

在这里插入图片描述

4.2.1. 证书别名、证书私钥密码、证书文件地址 分别如何获取?

  • 下面以为自己为例

  • 我的证书的生成命令是:

keytool -genkeypair -alias android -keysize 2048 -validity 36500 -keyalg RSA -keystore D:\keystore\apk.keystore

这个命令中的参数的意思为:

  • -genkeypair:生成一对非对称密钥(可选-genkey)。
  • -alias:指定条目以及密钥对的别名,该别名是公开的。
  • -keysize 2048指定证书大小
  • -validity 36500指定证书有效期
  • -keyalg:指定加密算法,本例中采用通用的RSA算法。
  • -keystore:设定密钥库文件的存放路径以及文件名字。(存放路径D:\keystore\不写,默认存储到你当前cmd执行的目录)
  • 那么查询证书信息的命令就是:
keytool -list -v -keystore D:\keystore\apk.keystore

在这里插入图片描述

根据以上信息可得出

  • 证书别名: android
  • 证书私钥密码: 就是你生生成证书的时候填写密码
  • 证书文件地址: D:\keystore

在这里插入图片描述

  • 23
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uniapp使用高德地图,需要安装并引入uniapp高德地图插件。以下是具体的步骤: 1. 在`manifest.json`文件中声明使用高德地图插件,示例代码如下: ``` { "mp-weixin": { "plugins": { "myPlugin": { "version": "1.0.0", "provider": "wxfoo" } } }, "app-plus": { "plugins": { "myPlugin": { "version": "1.0.0", "provider": "foo" } } } } ``` 2. 安装高德地图插件,在终中输入以下命令: ``` npm install uniapp-amap --save ``` 3. 在需要使用高德地图的页面中引入插件并初始化地图,示例代码如下: ``` <template> <view class="map-container"> <amap :id="mapId" :longitude="longitude" :latitude="latitude" :markers="markers" /> </view> </template> <script> import AMap from 'uniapp-amap' export default { data() { return { mapId: 'map', longitude: 116.397428, latitude: 39.90923, markers: [{ id: 1, longitude: 116.397428, latitude: 39.90923, iconPath: '/static/images/marker.png', width: 32, height: 32 }] } }, mounted() { AMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Geolocation'] }) } } </script> ``` 其中,`mapId`为地图组件的id,`longitude`和`latitude`为地图的中心经纬度,`markers`为地图上的标记点,`initAMapApiLoader`方法用于初始化高德地图API,需要传入高德地图的开发者Key以及需要使用的插件列表。注意,需要将`your amap key`替换为自己的高德地图开发者Key。 以上是在uniapp使用高德地图的基本步骤,具体实现还需要根据自己的业务需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值