uniapp中引入高德地图,实现周边查询,和根据经纬度导航功能

项目用的Uiapp的App版本,需要用到查询周边服务,和导航到指定位置的功能,文章为自己的个人工作记录  2个功能,1.查询周边服务;2.导航到指定位置

一、注册高德地图账号,注册成为开发者

        我曾遇到过一个情况,注册时总是提示不成功,后来发现是自己曾经用过高德打过车忘记付车费了,如果有注册失败,可以做为排查错误的一个因素

高德官网icon-default.png?t=O83Ahttps://lbs.amap.com/

第二步:创建自己的应用,获取需要用的key和密码

        步骤: 登录 --> 控制台 --> 应用管理 -->  我的应用 --> 创建应用 

 

 第三步、添加KEY (Android)

        3.1 添加KEY的时候有4个必填项,也是需要认真填写的四项,如果有某一项不符合要求,会在使用时出现问题,下面我重点记录一下SHA1获取方式  和PackageName获取方式

        3.1.1   1. Key名称按照要求填写即可

                    2. 服务平台选择Android平台

                    3. 发布版安全码SHA1的获取             

                               说明:我们需要登录uniCloud Web控制台,    找到我的应用-->应用管理               ​​​​​​​        
                         uniCloud Web控制台icon-default.png?t=O83Ahttps://unicloud.dcloud.net.cn/pages/login/login         

             

     

     证书详情内的SHA1就是我们需要的值,复制,然后放到创建KEY页面

                                     4.PackageName 获取

                                说明: 就是我们打包时候的包名,这里一定要填写正确

                                     

第三步、添加KEY (web服务)

第四步、完成了上面三步之后,我们会获取到需要用到的 用户名、key和秘钥,下面我们在uniapp项目中进行配置,根据图一步一步配置即可

  

 走到这里我们的高德地图的配置就完成了,下面就是在项目中如何使用和项目打包

第五步、使用(查询周边服务)

uni.chooseLocation({
	success: function (res) {
		console.log('位置名称:' + res.name);
		console.log('详细地址:' + res.address);
		console.log('纬度:' + res.latitude);
		console.log('经度:' + res.longitude);
	}
});

  使用(导航到指定位置)

uni.getLocation({
	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
	success: function (res) {
		const latitude = res.latitude;
		const longitude = res.longitude;
		uni.openLocation({
			latitude: latitude,
			longitude: longitude,
			success: function () {
				console.log('success');
			}
		});
	}
});

    第六步、打包

             打包使用自有证书,有三个必填项 1. 证书别名、2.证书私钥密码、3.证书文件          

                              

      这三项内容在uniCloud后台内,uniCloud控制台

        1. 证书别名

                

         2.证书私钥密码

        

3.证书文件       

到此我们打包的三要素就齐全了,最后点击打包

<think>嗯,用户这次的问题是关于在uniapp中使用高德地图时,点击@tap事件无法获取经纬度的解决方案。我需要结合用户提供的三个引用内容来分析问题。 用户引用的内容很有参考价值。引用[1]展示了基本的高德地图集成方式,引用[2]提到了点击获取经纬度的需求,引用[3]则提到了两种位置选择方案。但用户明确表示这些引用不是最终需求,核心问题是@tap事件失效。 从技术角度看,这可能是几个关键问题:首先是uniapp的map组件本身没有内置点击事件返回经纬度功能,这点很重要;其次是用户可能在错误的事件上绑定监听;还有就是高德地图API的初始化方式可能影响功能实现。 考虑到uniapp的特性,map组件的@tap事件默认只返回屏幕坐标而非经纬度,这是关键差异。解决方案应该围绕如何转换坐标展开:一是使用高德地图的convertFrom方法进行坐标转换;二是考虑改用更专业的@regionchange事件。 用户可能已经尝试过简单绑定@tap事件但发现返回数据不符合预期,说明ta对地图坐标转换机制不太熟悉。需要特别强调坐标转换这个技术点,因为引用内容里完全没有提到这点。 另外注意到引用[3]提到的uni.chooseLocation方案,虽然能解决问题但会跳转新页面,可能不符合用户"在当前页面交互"的需求,所以作为备选方案更合适。 在给出代码示例时,要确保包含完整的坐标转换逻辑,特别是amapFun.getRegeo方法的调用细节。同时要提醒用户注意异步处理,因为地图API调用都是异步的。 最后要解释为什么需要创建mapContext对象——因为uniapp的map组件控制依赖这个对象,这点在引用[1]的代码片段里有体现但没说明作用。 </think>在 UniApp 中使用高德地图时,`@tap` 事件默认返回的是屏幕坐标(`{x, y}`),**而非经纬度坐标**。要解决点击地图获取经纬度失效的问题,需要调用高德地图 API 进行坐标转换: ### 解决方案步骤 1. **正确绑定事件 & 获取屏幕坐标:** ```html <template> <map id="my-map" :latitude="latitude" :longitude="longitude" @tap="handleMapTap" <!-- 绑定点击事件 --> ></map> </template> <script> // ... 引入 amap-wx.js 初始化 myAmapFun 的代码 ... export default { methods: { async handleMapTap(e) { // 1. 获取点击事件的屏幕坐标 (e.detail) const screenX = e.detail.x || e.detail.longPress?.[0]?.x; // 兼容普通点击长按 const screenY = e.detail.y || e.detail.longPress?.[0]?.y; if (screenX === undefined || screenY === undefined) { console.error('无法获取点击屏幕坐标', e.detail); return; } // ... 后续步骤 ... } } } </script> ``` 2. **使用高德 API 转换屏幕坐标为经纬度:** ```javascript handleMapTap(e) { // ... 获取 screenX, screenY 代码 ... // 2. 获取 MapContext (确保在 onReady 或之后调用) const mapCtx = uni.createMapContext('my-map', this); // ID 需匹配 map 标签的 id // 3. 调用高德 API 将屏幕坐标转为经纬度 try { // 关键步骤:调用 convertFrom 方法 const res = await new Promise((resolve, reject) => { myAmapFun.getRegeo({ location: `${screenX},${screenY}`, // 传入屏幕坐标 success: resolve, fail: reject }); }); // 4. 从回调结果中获取经纬度 if (res && res[0] && res[0].longitude && res[0].latitude) { const longitude = res[0].longitude; // 经度 const latitude = res[0].latitude; // 纬度 const address = res[0].name; // 可选:大致位置描述 console.log('点击位置经纬度:', longitude, latitude, address); // 5. 更新 data 或执行后续操作 this.longitude = longitude; this.latitude = latitude; // ... 其他业务逻辑(如显示标记、跳转等)... } else { console.error('坐标转换失败,返回数据异常:', res); } } catch (err) { console.error('调用 getRegeo 转换坐标失败:', err); } } ``` ### 关键点说明 1. **`@tap` 事件返回屏幕坐标:** `e.detail` 包含的是点击点在屏幕上的像素位置 (`x`, `y`),不是经纬度[^2]。 2. **必须使用高德 API 转换:** `myAmapFun.getRegeo` 是高德地图提供的将**屏幕坐标**转换为**经纬度坐标**的核心方法[^1][^2]。 3. **`mapContext` 的作用:** `uni.createMapContext` 获取的是 UniApp 的 MapContext 对象,用于调用 UniApp 提供的原生地图控件方法(如移动视野)。转换坐标**必须依赖高德 API (`getRegeo`)**,而非 MapContext。 4. **异步处理:** `getRegeo` 是异步操作,使用 `Promise` 或 `async/await` 处理更清晰。 5. **错误处理:** 务必添加 `try...catch` 结果有效性检查,确保转换成功。 6. **权限与 Key:** 确保已正确配置高德地图的 Key 且无错误,并在高德控制台开通了相应权限(通常 `getRegeo` 需要逆地理编码或定位服务权限)。 ### 备选方案:使用 `@regionchange` (推荐) 如果点击目的是为了移动地图后获取中心点经纬度,`@tap` + 转换可能并非最佳。改用 `@regionchange` 事件更高效: ```html <map id="my-map" :latitude="latitude" :longitude="longitude" @regionchange="handleRegionChange" <!-- 地图视野变化时触发 --> ></map> ``` ```javascript handleRegionChange(e) { if (e.type === 'end') { // 只在视野变化结束时获取 this.mapContext = this.mapContext || uni.createMapContext('my-map', this); this.mapContext.getCenterLocation({ success: (res) => { this.longitude = res.longitude; this.latitude = res.latitude; console.log('地图中心点经纬度:', res.longitude, res.latitude); }, fail: (err) => { console.error('获取中心点失败:', err); } }); } } ``` 此方式性能更优,且无需调用高德 API 转换坐标,直接通过 `getCenterLocation` 获取中心点经纬度[^2][^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值