uni-app - 小程序使用高德地图完整版

已于 2025-04-30 16:21:04 修改
阅读量261 收藏
点赞数
分类专栏： 项目实操 文章标签： uni-app 小程序 apache
于 2025-04-30 16:17:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44412840/article/details/147634541
版权

文章目录

🍉功能描述

页面自动通过定位获取用户位置并展示周边POI数据，同时支持关键词输入实时联想推荐关联地点信息，
实现精准智能的地点发现与检索功能。

🍉效果

在这里插入图片描述

🍉开发环境
unibest 2.5.4
node v18.20.5
pnpm 9.14.2
wot-design-uni ^1.7.1

开发之前一定要申请高德开放平台小程序key
在这里插入图片描述

🍉代码部分

了解本专栏 订阅专栏 解锁全文 超级会员免费看
uniapp [全端兼容] - 实现仿微信聊天发送位置信息功能，uni-app项目实现发送位置的地图交互效果示例，用户通过选择位置或搜索地点确定后，对方点击也可以查看位置及导航等（高德地图+百度地图）
王二红
04-05 7017
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，uniapp模仿微信实现发送位置消息，解决滚动页面地图层级冲突，uniapp有没有内置的类似于微信发送位置的组件，uniApp中实现微信式发送位置消息，uniApp高德地图，uniapp百度地图，uniapp如何实现位置信息的发送和展示，map地图组件，uni-app移动端仿微信发送位置的地图交互，UNI-APP仿微信发送位置功能，发送位置后对方可以查看和导航到该位置，获取当前定位，选择位置，搜索位置
Uni-app框架（小程序开发） 笔记
weixin_43925969的博客
09-18 2122
┌─components uni-app组件目录│ └─comp-a.vue 可复用的a组件├─hybrid 存放本地网页的目录， 详见├─pages 业务页面文件存放的目录│ ├─index│ │ └─index.vue index页面│ └─list│ └─list.vue list页面├─static 存放应用引用静态资源（如图片、视频等）的目录， 注意： 静态资源只能存放于此├─wxcomponents 存放小程序组件的目录， 详见├─main.js Vue初始化入口文件。
Uni-App开发框架介绍
HelloMagina的博客
03-21 7196
调研了Uni-App开发框架，核心是了解将Uni-app的小程序嵌入到已有Android/iOS项目中的结果。
【开题报告】基于uni-app的汽车租赁app的设计与实现
各类程序设计成品、文档、学习资料
11-20 1041
项目背景：随着人们生活水平的提高，汽车租赁服务在城市中变得越来越普及。传统的租车方式存在一些问题，比如租车流程繁琐、费用不透明、选择有限等。因此，开发一款基于uni-app的汽车租赁app成为了满足用户需求的重要途径。项目意义：（1）提供便捷的汽车租赁服务：基于uni-app的汽车租赁app将提供用户友好的界面和操作流程，让用户可以方便地选择、预订和租赁汽车，从而解决传统租车方式的不便之处。
uni-app 官网教程
热门推荐
freeking101的博客
07-18 1万+
uni 读you ni，是统一的意思。uni-app 即 统一 app，写一次代码，在各个平台都可以运行。uni-app 是由 DCloud 团队推出的使用Vue.js开发跨平台应用的前端框架。开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app基础知识
m0_44973790的博客
04-20 941
1.uni-app进行条件编译的两种方法？小程序端和H5的代表值是什么？ 通过#ifdef、#idndef 的方式 H5：H5 MP-WEIXIN: 微信小程序 2.uni-app的配置文件，入口文件，主组件，页面管理部分 page.json 配置文件 main.js 入口文件 App.vue 主组件 pages 页面管理部分 3.uni-app上传文件时用到的API是什么？格式是什么 u
uni-app接入高德地图SDK实现定位用户城市
u011286552的博客
03-28 1万+
参考文章：http://ask.dcloud.net.cn/article/35070 本文以高德微信小程序 SDK 为例，简述如何在 uni-app 中利用微信小程序第三方 SDK，实现 App 端和微信小程序的代码通用。 获取SDK 首先在高德开放平台，注册账号并且申请相关的 key 等信息，然后下载它的微信小程序版 SDK：微信小程序 SDK。 新建一个 uni-app 项目，新建一个 co...
uniapp项目转为html,微信小程序转换uni-app详细指南、小程序转uni-app转换器、wepy转uni-app...
weixin_39942488的博客
05-31 976
号外：推荐使用HBuilderX插件https://ext.dcloud.net.cn/plugin?id=2656，直接转换小程序到uni-app本文首先分享转换步骤和原理，文末会分享三方开发者制作的 小程序转uni-app的转换器 和 wepy转uni-app转换器 。小程序转换uni-app的步骤微信小程序的语法，其实是vue.js语法的裁剪定制版，在数据绑定、自定义组件等很多方面都有相似之...
uniapp 微信小程序使用高德地图Vue3不兼容Vue2问题
qq_36158551的博客
02-28 1526
uniapp Vue3项目引用高德地图报错。
记录下uniapp开发结合webview调用高德地图（路线规划，多路选择，双向通信）_uniapp 打车
2401_84297193的博客
05-04 988
/ web 向 微信小程序发消息（由于微信小程序没法实时通过webview上onPostMessage方法调用，只能当页面摧毁或隐藏的时候才能调用，所以通过互转路由来获取web传递参数最好）// app向 web发送消息 （注意 需要将web在页面加载好了再调用，以防止报错，或加个延时再调用）通过evalJs注册函数在web的windows上调用。-----> 注意不能使用evalJs调用…// 微信小程序 向 web发送消息。// app 向 web发送消息。// web 向 app发消息。
记录下uniapp开发结合webview调用高德地图（路线规划，多路选择，双向通信）_uniapp 打车(1)
2401_83739951的博客
04-16 495
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
Uniapp：showLoading（等待加载）
MMF博客园
04-28 235
Uniapp：showLoading（等待加载）
uniapp打包apk详细教程
qq_72114625的博客
04-30 357
如何将uniapp项目打包成一个apk教程
uniapp 微信小程序遇到的坑
yzx231858的博客
04-28 466
在开发微信小程序 使用自定义tabbar，tabbar列表页面使用原生下拉刷新 模拟机是没问题的，在安卓端真机调试会遇到下拉刷新时tabbar也会跟着下拉出页面 ，回弹后显示正常使用scroll-view嵌套模式，可滚动视图区域。使用竖向滚动，需要给一个固定高度skyline 渲染模式下，当存在两个 scroll-view 相互嵌套的场景时，两者的滚动不能很丝滑的进行衔接，故可将外层 scroll-view 改成嵌套模式，这样可以让两个 scroll-view 的滚动衔接起来。
Uniapp：置顶
MMF博客园
04-29 206
Uniapp：置顶
如何在uni-app中自定义输入框placeholder的样式
最新发布
weixin_70543642的博客
04-30 438
通过使用属性和CSS样式，我们可以轻松自定义uni-app中输入框的placeholder样式。这种方法简单而有效，可以帮助开发者实现更丰富的UI设计。
uniapp自定义头部(兼容微信小程序(胶囊和状态栏)，兼容h5)
qq_43217258的博客
04-28 345
很早之前就写过自定义头部，但是那时偷懒写死了，现在用插槽重新写了个type1是完全自定义的，可以自己去组件改也可以用插槽改type2是正常的返回标题和右边按钮，使用就是,右边按钮是插槽，可以和下面例子一样用。
基于 SSE 和分块传输的 Uniapp 微信小程序 实现 流式传输 对话
weixin_62733705的博客
04-28 553
在请求头中设置了 ‘X-DashScope-SSE’: ‘enable’，启用了SSE协议
uniapp自定义选项卡
m0_63542260的博客
04-29 720
* 继承父元素背景 */
uni-app开发微信小程序高德地图
02-15
### 使用 Uni-app 集成高德地图功能 #### 创建项目结构并初始化配置 为了在 Uni-app 中集成高德地图，需先创建一个新的 Uni-app 项目，并确保已安装最新版本的 HBuilderX 或其他支持工具。接着，在 `manifest.json` 文件中的 AppID 字段填写微信小程序对应的 AppID。 #### 获取 API Key 并设置合法域名 前往 [高德开放平台](https://lbs.amap.com/) 注册账号并申请 Web服务API key[^3]。完成注册后，登录微信公众平台的小程序后台，在 **开发管理 -> 开发设置** 页面下的 "request 合法域名" 添加项中加入 https://restapi.amap.com/ ，以便允许应用向高德服务器发起请求获取地理数据和服务。 #### 编写页面布局与样式 定义一个简单的 HTML 结构用于展示地图容器： ```html <template> <view class="container"> <!-- 地图显示区域 --> <map id="myMap" :latitude="latitude" :longitude="longitude"></map> <!-- 控制按钮和其他交互元素可以放在这里 --> </view> </template> <style lang="scss" scoped> @import './styles/map'; .map_container { position: absolute; top: 0; bottom: 80px; left: 0; right: 0; } </style> ``` 注意这里引入了一个外部 SCSS 文件来处理样式细节[^4]。 #### 实现核心逻辑 接下来编写 JavaScript 来控制地图行为和响应用户操作： ```javascript export default { data() { return { mapCtx: null, longitude: '', // 经度 latitude: '' // 纬度 }; }, onLoad(options) { this.getLocation(); }, methods: { getLocation(){ const that = this; // 调用微信内置接口获得当前位置坐标 uni.getLocation({ type:'gcj02', // 返回国测局加密后的坐标系 success(res){ that.latitude=res.latitude; that.longitude=res.longitude; // 初始化 map context 对象并与视图层关联起来 that.mapCtx=uni.createMapContext('myMap',this); // 可在此处继续执行更多基于位置的操作... }, fail(err){ console.error("Failed to get location:", err); } }); } } } ``` 上述代码片段展示了如何利用 `uni.getLocation()` 方法取得用户的当前地理位置信息，并将其赋值给组件的数据属性；之后再通过 `uni.createMapContext()` 函数实例化 Map Context 对象，从而能够在后续实现更复杂的功能如标记点位、路线规划等[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kingsaj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值