uni-app 手机App中使用map（高德地图）自定义地图样式

最新推荐文章于 2025-04-25 16:55:37 发布
最新推荐文章于 2025-04-25 16:55:37 发布
阅读量2.8k 收藏 4
点赞数
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44766377/article/details/127001482
版权
本文介绍了如何在高德地图控制台创建自定义地图样式，并获取地图Key。接着，展示了如何在uni-app项目中配置这个Key，以及在.nvue文件中使用map标签时需要注意的细节，如宽度和高度单位。最后，呈现了最终的应用效果。

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

最低0.47元/天 解锁文章
晓峰666
关注
uni-app - 小程序使用高德地图完整版
King Saj
04-30 510
页面自动通过定位获取用户位置并展示周边POI数据，同时支持关键词输入实时联想推荐关联地点信息，实现精准智能的地点发现与检索功能。
uniapp在app端自定义地图样式
牵着蜗牛去旅行的博客
08-17 1477
<map layer-style="c29e758aea2d2a1873049aeb81dab986"> </map> 中间这行字符串是在高德地图上获取自定义地图的样式id
uniapp在引用高德地图实现自定义省市区海量点
weixin_52830464的博客
06-05 652
vue在手机端引用高德地图实现自定义省、市、区、项目、设备海量点，根据地图的zoom设置成4-6级是省级别、7-9级是市级别、10-12级是区级别、13和14级是项目级别、15级-15级以上是设备级别。省、市、区、项目的数据，对象的字段是: name、value、latitude、longitude、id。设备的数据，对象的字段是: name、value、latitude、longitude、deviceid。传给后端的字段是地图的被点击海量点的id(areaid)和地图的缩放等级(grade)
uni-app 引入高德地图
最新发布
lh_1254的博客
04-25 1465
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 微信小程序地图map组件样式自定义
学而不思则罔
06-08 1530
uniapp 微信小程序地图map组件样式自定义
uniapp开发的App中使用高德地图
m0_57442975的博客
09-28 1万+
map地图在不同的开发场景使用不同，这里主要是uniapp开发的Android软件中关于高德地图使用的一些项目记录。
uniapp 使用高德地图更换主题
chuxindddd的博客
12-23 2969
uniapp使用高德个性化地图
uniapp使用高德地图
qwe_aaaaa的博客
07-26 1万+
uniapp高德地图使用，单点和路线规划。
选择地图示例_地图_uni自做地图_app小程序_uni-app地图选择_uni-app_
10-04
在uni-app中，地图组件通常通过<map>标签引入，它支持多种地图服务提供商，如高德地图、百度地图和腾讯地图。通过设置`provider`属性，我们可以选择不同的地图服务提供商，例如`amap`（高德）、`baidu`（百度）或`qq...
uni-app 高德地图调用实例
Zhouyuding_yyds的博客
10-25 737
签到
uni-app 支持多端第三方地图定位的方法
11-30
APP端跳转至百度地图（第三方软件）；若无，则跳转至高德地图（第三方软件）；若均无，则打开腾讯地图（uni自带方法：uni.openLocation） 其它端打开腾讯地图（uni自带方法：uni.openLocation） demo 源码：...
在uniapp做高德地图，发布为h5网页
11-14
在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息
一套代码玩转地图三端：uni-app高德地图集成全攻略
ranweidaoke的博客
04-11 1070
我们可以实现在 uni-app 中跨平台使用高德地图，不论是展示用户位置、添加标记、还是调用 Web 服务接口如地点搜索、路线规划等功能，都可以良好支持。后续还可以结合高德地图 Web SDK（如 JSAPI 2.0）或原生 SDK 开发更复杂的地图交互功能。如果你在使用过程中遇到具体问题，也可以留言提问，我会尽力帮你解答！
uniapp App端使用高德地图
weixin_41558432的博客
02-15 1万+
uni App端使用高德地图
【Uniapp】高德地图的接入、定位、自定义标点与信息窗体使用
热门推荐
Brod-Roy的博客
06-19 2万+
因为公司的业务需求，需要实现一个接入高德地图的数据大屏，并根据坐标实现地图标点渲染，自定义信息窗体，点击定位等功能。查阅高德地图官方文档时发现使用的是原生 JavaScript ，且网上 uniapp 接入使用的教程较少，我自己摸索之后解决了不少问题，欢迎大佬补充纠正。
uniapp小程序使用高德地图
Rio_Gaven的博客
02-22 7494
14.对了，wx.getLocation(获取当前位置)这个api建议是开通下，方便用户打开地图就显示用户当前的位置（注意：一定是要在需要使用该功能的页面调用，不然官方会判定违法获取隐私，禁用你的功能，本人已踩过坑，当然，也通过申诉解封，在其他文章也有写，可以去参考下）13.其余的就是根据UI图来写对应的组件，如:搜索栏，搜索列表什么的，具体需要的方法可以参考高德开放平台手册，获取周边啥啥啥的。2.扫二维码选择对应的项目-设置-服务内容声明-用户隐私保护指引-更新-按照下面红框里的设置。
uniapp 自定义地图组件（根据经纬度展示地图地理位置）
qq_65142821的博客
03-07 658
template></view><script>},height() {},},},},methods: {// 点击事件});
uniapp - [安卓|苹果]实现App端引入高德地图，详细获取当前用户手机定位、两个地点的路线规划及相关示例代码，uniapp安卓Android平台软件下使用高德地图，获取当前位置信息及规划路线
高级前端工程师
02-20 4411
uniapp，高德地图，安卓app端，苹果ios系统端，安卓苹果app，高德地图路线规划，uniapp app高德地图，获取当前位置信息，获取用户当前定位，uniapp软件APP如何使用高德地图并获取用户位置，uniapp实现获取用户位置信息（经纬度），通过高德地图和腾讯地图解析，uniapp开发APP使用高德实现定位，uniapp使用高德地图路径规划，uniapp使用高德地图定位打包成安卓app，引入高德地图报错不显示怎么办，高德地图位置无法获取，出现报错警告错误，规划路线，如何使用高德规划路线两个地点的
uni-App APP端及H5使用高德地图 实现创建地图 路线规划 添加定点
weixin_51951576的博客
10-12 3158
注意此处的maker和标点都是用的我本地项目下static的静态图片，你们要在地图html文件对应进行更改，最好使用绝对路径，不要使用相对路径，否则打包到真机会显示不出图片。前言：最近公司开发需要用到uni-app搭配高德地图，在踩坑后实现了基本的要求，过程之曲折就不说了，特地开贴记录下。2.在根目录创建static文件夹，在static文件夹下创建html文件夹，在html文件夹创建地图html文件。4.创建好地图html文件后，到根目录page文件夹创建承载html文件的index.vue文件。
uni-app的h5项目使用高德地图获取当前定位
04-16
在uni-app的H5项目中，可以使用高德地图API来获取当前定位。下面是一种实现方式： 1. 首先，在uni-app项目中安装高德地图插件。可以通过以下命令进行安装： ``` npm install @types/amap-js-api --save ``` 2. 在需要获取定位的页面中，引入高德地图的JS API。可以在`index.html`文件中添加以下代码： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_key"></script> ``` 其中，`your_amap_key`需要替换为你自己的高德地图开发者密钥。 3. 在页面的`methods`中，编写获取定位的方法。可以使用高德地图提供的`AMap.Geolocation`类来实现。以下是一个示例代码： ```javascript methods: { getLocation() { AMap.plugin('AMap.Geolocation', () => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位，默认为true timeout: 10000, // 超过10秒后停止定位，默认：无穷大 }); geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { // 定位成功，result中包含经纬度等信息 const { lng, lat } = result.position; console.log('当前位置经纬度：', lng, lat); } else { // 定位失败 console.log('定位失败'); } }); }); } } ``` 4. 在页面中调用`getLocation`方法即可获取当前定位信息。可以在按钮的点击事件中调用该方法： ```html <button @click="getLocation">获取当前定位</button> ``` 这样，当用户点击按钮时，就会触发获取当前定位的操作，并将结果输出到控制台中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值