uni-app高德地图配置

最新推荐文章于 2025-06-09 12:17:27 发布
原创 最新推荐文章于 2025-06-09 12:17:27 发布 · 2.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android

在uni-app中使用自定义基座的地图功能，需要在manifest.json中启用地图模块并选择高德地图。配置Android版时，需获取SHA1安全码，通过指定步骤安装JRE并设置环境变量。完成环境配置后，获取SHA1并用其在高德地图应用中申请app_key，将app_key填入uni-app的manifest.json，重新打包即可。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

自定义基座里 地图是不能直接使用的，需要在manifest.json的“App模块配置”中勾选“Maps(地图)”，并根据项目实际情况勾选使用的三方地图SDK，官方教程：官方教程

 选地图模块需要配置app_key, app_key需要自己去地图应用官方申请，我这里选的是高德地图

ios的app_key比较容易，根据提示填就好了，Android的app_key需要安全码SHA1，有点难搞

 找到了一篇说明，

最低0.47元/天 解锁文章

200万优质内容无限畅学
【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能
luhanglh的博客
07-15 8800
【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能。 uni-app实现高德地图选点功能
uniapp中引入高德地图，实现周边查询，和根据经纬度导航功能
m0_69766451的博客
12-15 2566
在uniapp项目app版本中引入高德地图，实现搜索周边服务、和导航到指定位置；文档内容包含注册-->配置-->使用-->最后打包步骤，根据步骤一步一步即可完成
uniapp开发的App中使用高德地图
热门推荐
m0_57442975的博客
09-28 1万+
map地图在不同的开发场景使用不同，这里主要是uniapp开发的Android软件中关于高德地图使用的一些项目记录。
如何在uniapp上面使用高德地图
gege_0606的博客
06-09 1701
但是要注意，我们的uniapp如果单纯建一个lib文件夹并不会打包进入微信小程序的执行文件当中，所以我们把它放在static下面新建一个lib。来配置安全通讯域名：在 "设置"－>"开发管理" 中设置 request 合法域名，登录。首先需要在高德地图上面申请个人开发者，这个只需要使用支付宝认证一下很简单的啦~如果说我们只是微信小程序使用高德地图的话我们就不需要 设置APP模块设置。在uniapp当中设置微信小程序的配置。那我们设置的小程序的key如何使用呢？然后就是根据新手教程 设置我的应用。
uni-app 引入高德地图
lh_1254的博客
04-25 3201
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标（可选）​。AMapUI: { version: '1.1', plugins: ['geo/DistrictExplorer'] }, // 可选UI组件​。mapStyle: 'amap://styles/light' // 地图样式（浅色主题）​。// 地图定位到搜索结果​。
uniapp之app使用高德地图
weixin_46355018的博客
04-17 824
console.log('当前位置的经度：' + res.longitude);console.log('当前位置的纬度：' + res.latitude);console.log('详细地址：' + res.address);console.error('获取位置失败：', err);高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。我不太清楚Geolocation定位这边要不要√，反正我是都勾上了。一、进入高德开放平台，注册并验证开发者。填完这些高德这边就算配置好了。
uniapp小程序使用高德地图
Rio_Gaven的博客
02-22 7620
14.对了，wx.getLocation(获取当前位置)这个api建议是开通下，方便用户打开地图就显示用户当前的位置（注意：一定是要在需要使用该功能的页面调用，不然官方会判定违法获取隐私，禁用你的功能，本人已踩过坑，当然，也通过申诉解封，在其他文章也有写，可以去参考下）13.其余的就是根据UI图来写对应的组件，如:搜索栏，搜索列表什么的，具体需要的方法可以参考高德开放平台手册，获取周边啥啥啥的。2.扫二维码选择对应的项目-设置-服务内容声明-用户隐私保护指引-更新-按照下面红框里的设置。
uni-app 高德地图调用实例
Zhouyuding_yyds的博客
10-25 780
签到
一套代码玩转地图三端：uni-app高德地图集成全攻略
ranweidaoke的博客
04-11 1192
我们可以实现在 uni-app 中跨平台使用高德地图，不论是展示用户位置、添加标记、还是调用 Web 服务接口如地点搜索、路线规划等功能，都可以良好支持。后续还可以结合高德地图 Web SDK（如 JSAPI 2.0）或原生 SDK 开发更复杂的地图交互功能。如果你在使用过程中遇到具体问题，也可以留言提问，我会尽力帮你解答！
address(uni-app经纬度定位范围内签到)
06-24
此外，为了提升用户体验，可以利用地图插件（如高德地图、百度地图等）在页面上显示用户的位置和签到范围，让用户直观地看到自己是否在区域内。同时，还可以通过后台服务存储签到记录，防止用户重复签到。 综上所述...
uni-app 配置 地图
Cris_are的博客
03-03 2776
DCloud_App_Array 发布：2014-07-22 11:31 更新：2021-01-31 18:40 阅读：379239 地图插件配置 分类：HTML5+ 云端打包发布常见问题 概述 HBuilderX集成了常用的原生地图控件，相对于Web地图（H5地图），使用原生地图控件有更流畅的操作速度，可以提升APP的用户体验。 目前支持百度地图和高德地图，如需使用其它地图控件可参考Uni原生插件开发扩展支持。 使用须知 最新版本HBuilderX中自带的真机运行基座默认内置..
UNIAPP中高德地图获取当前所在位置省份、城市、区、详细地址。以及uniapp安卓打包时高德地图应用的详细配置过程，百度地图。
qq_14852047的博客
09-14 2629
UNIAPP中高德地图获取当前所在位置省份、城市、区、详细地址。以及uniapp安卓打包时高德地图应用的详细配置过程，百度地图。
uni-App APP端及H5使用高德地图 实现创建地图 路线规划 添加定点
weixin_51951576的博客
10-12 3494
注意此处的maker和标点都是用的我本地项目下static的静态图片，你们要在地图html文件对应进行更改，最好使用绝对路径，不要使用相对路径，否则打包到真机会显示不出图片。前言：最近公司开发需要用到uni-app搭配高德地图，在踩坑后实现了基本的要求，过程之曲折就不说了，特地开贴记录下。2.在根目录创建static文件夹，在static文件夹下创建html文件夹，在html文件夹创建地图html文件。4.创建好地图html文件后，到根目录page文件夹创建承载html文件的index.vue文件。
uniapp 中引入高德地图
coder1998的博客
07-06 1万+
uniapp 引入高德地图 地图现在已经渗入到生活的方方面面，给生活带了极大的编译，那么我们如何才能在 项目中引入地图呢 首先看一下效果 ： 联系地址这个地方 在项目中引入的高德地图 引入步骤 首先 1，需要在高德开发平台注册成为开发者 地址： https://lbs.amap.com/ 2. 在控制台里面创建应用 申请获取Key 3. 下载微信小程序的SDK代码 引入项目中 4 在自己需要的页面引入 import amap from “…/…/js_sdk/js-amap/amap-wx.js”;
uniapp 实现高德地图导航
qq_37550440的博客
07-15 8084
效果图： <template> <view> <view class="page-body"> <view class="page-section page-section-gap"> <map id="map" @markertap="bindTap" @controltap="bindControltap" :controls="controls" style="width: 100%;heigh..
腾讯地图 uniapp配置
haohaoxueqd的博客
11-15 300
腾讯地图 uniapp
小程序通过经纬度获取省市区（高德地图）
weixin_56848461的博客
05-08 3764
在app.js文件中引入高德地图的js文件。amap-wx.130.js文件。
uni-app设置地图显示
weixin_59527403的博客
01-01 1314
uni-app设置地图显示
uni-app高德地图选点
最新发布
06-21
### 实现高德地图选点功能的教程 在uni-app中使用高德地图实现选点功能，可以通过以下方式完成。此功能需要结合高德地图API和uni-app的地图组件来实现。以下是详细说明： #### 1. 高德地图API集成 首先需要申请高德地图开发者账号，并获取API Key。将API Key配置到项目中[^1]。 ```javascript // 在main.js中全局引入高德地图API uni.setStorageSync('amapKey', '你的高德地图API Key'); ``` #### 2. 地图组件初始化 在页面中使用`<map>`组件加载地图，并设置相关属性[^1]。 ```html <template> <view> <map id="map" :latitude="latitude" :longitude="longitude" :markers="markers" style="width: 100%; height: 100vh;" @tap="handleMapTap" ></map> </view> </template> ``` #### 3. 获取当前位置 通过调用`uni.getLocation`方法获取用户的当前位置，并将其作为地图的初始中心点[^1]。 ```javascript export default { data() { return { latitude: 39.909, longitude: 116.39742, markers: [] }; }, onLoad() { this.getCurrentPosition(); }, methods: { getCurrentPosition() { uni.getLocation({ type: 'gcj02', success: (res) => { this.latitude = res.latitude; this.longitude = res.longitude; } }); } } }; ``` #### 4. 地图点击事件处理 当用户点击地图时，记录点击位置的经纬度，并在地图上添加标记点[^2]。 ```javascript handleMapTap(e) { const { latitude, longitude } = e.detail; this.markers = [{ id: 0, latitude, longitude, iconPath: '/static/marker.png', // 自定义图标路径 width: 30, height: 30 }]; } ``` #### 5. 搜索地点功能 通过高德地图提供的搜索接口，允许用户输入关键词搜索地点。 ```javascript searchLocation(keyword) { const key = uni.getStorageSync('amapKey'); uni.request({ url: `https://restapi.amap.com/v3/place/text?key=${key}&keywords=${keyword}&city=全国&output=json`, success: (res) => { const pois = res.data.pois; if (pois.length > 0) { const { location } = pois[0]; const [lng, lat] = location.split(','); this.latitude = parseFloat(lat); this.longitude = parseFloat(lng); this.markers = [{ id: 0, latitude: parseFloat(lat), longitude: parseFloat(lng), iconPath: '/static/marker.png', width: 30, height: 30 }]; } } }); } ``` #### 6. 权限处理 确保应用已经申请了定位权限。如果用户拒绝授权，需引导用户手动开启权限[^1]。 ```javascript uni.authorize({ scope: 'scope.userLocation', success() { console.log('用户已授权'); }, fail() { uni.showModal({ title: '提示', content: '未开启定位权限，请前往设置中开启', success(res) { if (res.confirm) { uni.openSetting(); } } }); } }); ``` #### 7. 兼容性优化 由于uni-app支持多端运行，需针对不同平台进行适配。例如，在微信小程序中可能需要额外处理地图组件的层级问题。 ```css /* 解决地图层级冲突 */ map { z-index: 1; } ``` ### 注意事项 - 确保API Key正确无误，并在正式环境使用前完成密钥验证。 - 图标路径`iconPath`需根据实际项目结构调整。 - 地图点击事件和搜索结果均需动态更新标记点位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值