uni-app 引入高德地图
一、准备工作:申请密钥与环境配置
1. 申请高德地图 API 密钥
- 注册并登录高德开放平台
- 创建「Web 端 (JS API)」类型应用,获取API 密钥(Key)✅ 注意:需在「安全设置」中添加域名(如https://*.yourdomain.com)
2. uni-app 项目配置
方式一:使用官方插件(推荐 H5/APP 端)
- 在 HBuilderX 中打开「插件市场」,搜索「高德地图 JS API」并安装
- 或通过 npm 安装:
TypeScript
取消自动换行复制
npm install @amap/amap-jsapi-loader --save
方式二:小程序端(需微信小程序配置)
- 在微信小程序后台「开发设置」中添加高德地图域名白名单:
TypeScript
取消自动换行复制
https://restapi.amap.com
https://webapi.amap.com
二、基础地图展示:3 步渲染地图
1. 创建地图容器
TypeScript
取消自动换行复制
<template>
<view>
<!-- 地图容器,需指定宽高 -->
<view id="mapContainer" style="width: 100%; height: 500px;"></view>
</view>
</template>
2. 初始化高德地图
TypeScript
取消自动换行复制
<script>
// 引入高德地图加载器(H5/APP端)
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
onLoad() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: '你的API密钥', // 替换为申请的Key
version: '2.0', // API版本
AMapUI: { version: '1.1', plugins: ['geo/DistrictExplorer'] }, // 可选UI组件
Loca: { version: '2.0.0' }, // 可选Loca可视化组件
plugins: ['AMap.Geocoder', 'AMap.PlaceSearch'] // 按需加载插件
}).then((AMap) => {
// 初始化地图实例
const map = new AMap.Map('mapContainer', {
center: [116.4039, 39.9144], // 地图中心点(北京坐标)
zoom: 13, // 缩放级别
mapStyle: 'amap://styles/light' // 地图样式(浅色主题)
});
this.map = map; // 保存地图实例
}).catch((err) => {
console.error('高德地图加载失败', err);
});
}
}
};
</script>
3. 小程序端特殊处理(需调整)
TypeScript
取消自动换行复制
// 小程序端使用uni.request加载API(避免跨域)
uni.request({
url: 'https://webapi.amap.com/maps?v=2.0&key=你的Key&callback=initMap',
dataType: 'script',
success: (res) => {
// 地图初始化逻辑同上
}
});
三、常用功能实现:标记点与定位
1. 添加自定义标记点
TypeScript
取消自动换行复制
// 在initMap中添加标记
const marker = new AMap.Marker({
position: [116.4039, 39.9144], // 标记坐标
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标(可选)
title: '北京' // 鼠标悬停提示
});
map.add(marker); // 将标记添加到地图
2. 获取用户当前位置
TypeScript
取消自动换行复制
// 申请定位权限(需在manifest.json配置GPS权限)
uni.getLocation({
type: 'wgs84',
success: (res) => {
const currentLngLat = [res.longitude, res.latitude];
// 在当前位置添加标记
const currentMarker = new AMap.Marker({ position: currentLngLat });
map.add(currentMarker);
// 地图定位到当前位置
map.setCenter(currentLngLat);
}
});
四、交互优化:信息窗口与搜索
1. 点击标记显示信息窗口
TypeScript
取消自动换行复制
// 创建信息窗口
const infoWindow = new AMap.InfoWindow({
content: '<div style="padding: 10px;">这是北京的标记点</div>', // 窗口内容
offset: new AMap.Pixel(0, -30) // 窗口位置偏移
});
// 绑定标记点击事件
marker.on('click', () => {
infoWindow.open(map, marker.getPosition());
});
2. 地点搜索功能(POI 搜索)
TypeScript
取消自动换行复制
// 初始化搜索插件(需在AMapLoader中声明plugins: ['AMap.PlaceSearch'])
const placeSearch = new AMap.PlaceSearch({
city: '北京', // 搜索城市
map: map // 关联地图实例
});
// 执行搜索
placeSearch.search('天安门', (status, result) => {
if (status === 'complete') {
const lngLat = result.poiList.pois[0].location.split(',').map(Number);
map.setCenter(lngLat); // 地图定位到搜索结果
}
});
五、实战案例:门店位置展示
完整页面代码
TypeScript
取消自动换行复制
<template>
<view>
<view id="mapContainer"></view>
<button @click="searchStore">搜索附近门店</button>
</view>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
data() {
return { map: null };
},
onLoad() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({ key: '你的API密钥', plugins: ['AMap.PlaceSearch'] })
.then((AMap) => {
const map = new AMap.Map('mapContainer', { zoom: 15 });
this.map = map;
// 初始化显示当前位置(需先获取定位)
this.getLocation();
});
},
getLocation() {
uni.getLocation({
success: (res) => {
const lngLat = [res.longitude, res.latitude];
this.map.setCenter(lngLat);
}
});
},
searchStore() {
const placeSearch = new AMap.PlaceSearch({ map: this.map, city: '当前城市' });
placeSearch.search('便利店', (status, result) => {
if (status === 'complete') {
result.poiList.pois.forEach((poi) => {
const marker = new AMap.Marker({ position: poi.location.split(',').map(Number) });
this.map.add(marker);
});
}
});
}
}
};
</script>
六、常见问题与解决方案
问题 | 解决方案 |
地图黑屏 / 不显示 | 1. 检查 API 密钥是否正确2. H5 端确保域名在高德白名单3. 小程序端添加域名白名单 |
定位失败 | 1. 确认手机开启定位权限2. manifest.json 中配置GPS定位权限(APP 端) |
标记点击无反应 | 确保标记实例绑定了正确的地图实例(map.add(marker)) |
搜索无结果 | 检查搜索关键词是否正确,或添加city: '全国'扩大搜索范围 |
总结
在 uni-app 中集成高德地图只需掌握三个核心步骤:
- 申请密钥并配置环境 → 2. 初始化地图实例 → 3. 添加功能组件(标记 / 定位 / 搜索)通过官方提供的 JS API 和插件,可快速实现地图展示、位置服务、POI 搜索等功能。建议从高德开放平台文档获取更多进阶功能(如路线规划、行政区划查询)。
相关文章:
uni-app 引入高德地图
一、准备工作:申请密钥与环境配置 1. 申请高德地图 API 密钥 注册并登录高德开放平台 创建「Web 端 (JS API)」类型应用,获取API 密钥(Key)✅ 注意:需在「安全设置」中添加域名(如https://*.yourd…...
开源项目实战学习之YOLO11:ultralytics-cfg-datasets-Objects365、open-images-v7.yaml文件(六)
👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 medical - pills.yaml 通常用于配置与医学药丸检测任务相关的参数和信息 Objects365.yaml 用于配置与 Objects365 数据集相关信息的文件。Objects365 数据集包含 365 个不同的物体类别…...
Windows环境下常用网络命令使用
ipconfig命令使用: ipconfig可用于显示当前的TCP/IP配置的设置值,通常是用来检验人工配置的TCP/IP设置是否正确。在网络连接出现问题时,可以使用ipconfig /release和ipconfig /renew命令来刷新IP地址,这通常能解决因IP地址冲突或…...
RS232“变形记”,Profinet如何让电力通信设备“改头换面”
在现代电力系统中,随着自动化和智能化技术的不断发展,通信协议的转换成为实现设备互联互通的关键环节。VING微硬创新RS232转Profinet技术为电力设备的升级和优化提供了有效的解决方案,本文将详细介绍这一技术的背景、原理、应用及意义。 一、…...
WordPress AI 原创文章自动生成插件 24小时全自动生成SEO原创文章 | 多语言支持 | 智能配图与排版
为什么选择Linkreate AI内容生成插件? ✓ 全自动化工作流程 - 从关键词挖掘到文章发布一站式完成 ✓ 多语言支持 - 轻松覆盖全球市场(中/英等多语种) ✓ 智能SEO优化 - 自动生成搜索引擎友好的内容结构 ✓ AI智能配图 - 每篇文章自动匹配高质…...
弹性布局--Flexbox
CSS3 的弹性盒子布局(Flexbox)是一种强大的布局模型,用于更轻松地创建复杂的布局,尤其适合响应式设计。以下是其详细介绍: 基本概念 Flex 容器(Flex Container): 通过将display属性…...
更新GNS3
更新GNS3 有时,我们需要更新GNS3(Graphical Network Simulator-3,图形化网络模拟器3)——一款用于模拟网络的学习软件,类似于Cisco Packet Tracer。然而,GNS3主要由两部分组成——GNS3客户端和GNS3虚拟机&…...
c#接口_抽象类_多态学习
c#接口_抽象类_多态学习 学习日志 关于:c#接口_抽象类_多态的学习记录。 一、概念 1. 多态(Polymorphism) 定义:同一操作作用于不同对象时,表现出不同的行为。实现方式: 继承 方法重写(ov…...
BGE-M3模型深度技术分析
以下是针对 BGE-M3 模型的深度技术分析,综合其架构设计、核心能力、性能表现及实际应用场景: 一、模型概览 BGE-M3(Beijing General Embedding M3)是北京智源研究院(BAAI)推出的多语言通用向量模型&#x…...
光谱相机如何提升目标检测与识别精度
光谱相机(多光谱/高光谱)通过捕捉目标在多个波段的光谱特征,能够揭示传统RGB相机无法感知的材质、化学成分及物理特性差异。以下是提升其目标检测与识别精度的核心方法: 1. 硬件优化:提升数据质量 (1) 光谱分辨…...
漏洞管理体系:从扫描评估到修复验证的全生命周期实践
漏洞管理体系:从扫描评估到修复验证的全生命周期实践 在网络安全防御体系中,漏洞管理是“攻防博弈”的核心战场。据NVD(国家漏洞数据库)统计,2023年新增漏洞超21万个,平均每天披露575个,其中32…...
资深程序员进阶设备分享,专业编程显示器RD280U
前言 在软件开发行业多年,长时间在电脑前工作常让我眼花、眼困、脊椎不舒服。曾尝试很多方法、买过不少产品,像显示器护眼挂灯、机械臂等,效果不佳还麻烦。直到我用上明基 RD280U 专业编程显示器,它上下可调高度,适配…...
云+AI双轮驱动,亚马逊云科技加速中国企业出海新浪潮
导读:全球化就是本地化 作者 | 小葳 图片来源 | 摄图 近年来,中国企业出海步伐不断加快,“不出海,就出局”成为很多企业的共识。 据沙利文统计,2024年上半年,超过2000家中国上市企业布局海外市场ÿ…...
不同ECU(MCU/ZCU/CCU)其部署(实现)的功能存在差异
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 周末洗了一个澡,换了一身衣服,出了门却不知道去哪儿,不知道去找谁&am…...
施工安全巡检二维码制作
进入新时代以来,人们对安全的重视程度越来越高。特别在建筑施工行业,安全不仅是关乎着工人的性命,更是承载着工人背后家庭的幸福生活。此时就诞生了安全巡检的工作,而巡检过程中内容庞杂,安全生产检查、隐患排查、施工…...
Linux 权限修改详解:chmod 命令与权限数字的秘密
在 Linux 系统的使用过程中,权限控制就像是一把神奇的钥匙,它决定了谁能在系统中对文件和文件夹进行何种操作。今天我们来深入了解一下如何使用 chmod 命令来修改文件和文件夹的权限,让你在系统管理时更加得心应手。 一、chmod 命令…...
git 的基本使用
文章目录 一、创建仓库并初始化1、操作步骤2、注意事项 二、工作区与版本库1、Git 管理文件类型2、Git 保存文件方式3、工作区与版本库概念及操作 三、命令小结四、版本回退与前进1、相关概念2、版本回退3、版本前进4、总结 五、撤销修改1、场景 12、场景 23、场景 34、注意事项…...
Android 编译问题 prebuilts/clang/host/linux-x86
Android 编译问题 prebuilts/clang/host/linux-x86工具被破环了,用打包的方式替换调工具,不能拷贝,会破坏工具的链接。 FAILED: out\_odm/soong/build.ninja cd "$(dirname "out\_odm/host/linux-x86/bin/soong\_build")&quo…...
SIEMENS PLC程序解读 -BLKMOV (指定长度数据批量传输)
1、程序代码 2、程序解读 这段西门子 PLC 程序(程序段 10)实现了基于条件的数据块移动功能,具体解释如下: 条件触点: %M0.1 Always<>(TRUE)(注释为 AT<>1):当 M0.1 的值…...
Git 核心命令学习总结
一、Git 基础概念 工作目录:本地实际操作的文件夹,包含项目文件。 暂存区:临时存放待提交的变更(通过 git add 添加)。 本地仓库:存储项目历史版本(通过 git commit 提交)。 二、…...
vscode 打开csv乱码
在 Visual Studio Code (VS Code) 中打开 CSV 文件出现乱码可能是由于以下几个原因导致的: 编码设置不正确:CSV 文件可能使用了不同的字符编码方式保存,而 VS Code 默认使用的字符编码可能与文件实际的编码方式不一致。你可以在 VS Code 的右…...
WebUI可视化:第3章:Gradio入门实战
学习目标 ✅ 掌握Gradio的安装与基础配置 ✅ 能创建包含多种交互组件的界面 ✅ 实现前后端数据交互逻辑 ✅ 独立开发简单AI应用界面 3.1 Gradio快速安装 3.1.1 通过pip安装 打开终端(Windows:CMD/PowerShell,Mac/Linux:Terminal),执行: bash # 基础安装 pip insta…...
Flink checkpoint问题排查指南
之前只因为checkpoint过大碰到过checkpoint失败的情况,没想到数据倾斜也会导致 我们知道 task 仅在接受到所有的 barrier 之后才会进行 snapshot,如果作业存在反压,或者有数据倾斜,则会导致全部的 channel 或者某些 channel 的 …...
mysql知识总结 索引篇
mysql知识总结 索引篇 1. 索引问题常见分类1. 什么是索引2. 索引的分类3. 从数据结构分类4. 通过二级索引查询商品数据的过程5. 为什么选择B树作为索引呢? 本文是阅读 小林coding 后的读书笔记 原文可以点击上面超链接到达 也可以直接百度搜索 小林coding 1. 索引…...
Flink 数据清洗与字段标准化最佳实践
—— 构建可配置、可扩展的实时标准化清洗链路 本文是「Flink Kafka 构建实时数仓实战」专栏的第 4 篇,将围绕字段标准化这一核心问题,从业务痛点、技术架构、配置设计到完整代码工程,系统讲透标准化实践。 📌 一、为什么实时字段…...
.NET写的开源工业物联网网关(IoTGateway)
Ver V0.0 250425 主要针对《物联网智能网关开发与设计》课程,根据官方的文档重新组织了一下,并演示了一下在Windows的VS2022下快速地搭建出了学习基于.NET8的Linux IoTGateway的开发,提供给学生作为学习的扩展和外延。 Index IoTGateway …...
蓝桥杯 5. 交换瓶子
交换瓶子 原题目链接 题目描述 有 N 个瓶子,编号为 1 ~ N,放在架子上。 例如有 5 个瓶子,当前排列为: 2 1 3 5 4每次可以拿起 2 个瓶子,交换它们的位置。 要求通过若干次交换,使得瓶子的编号从小到大…...
freeswitch配置视频对接
概述 freeswitch是一款简单好用的VOIP开源软交换平台。 随着4G/5G网络的完善,视频呼叫的需求慢慢变多,本文介绍使用fs对接视频线路的配置方案。 环境 CentOS 7.9 freeswitch 1.10.7 视频模块 目前主流视频编解码使用H264,需要编译安装…...
使用Tortoise-ORM和FastAPI构建评论系统
title: 使用Tortoise-ORM和FastAPI构建评论系统 date: 2025/04/25 21:37:36 updated: 2025/04/25 21:37:36 author: cmdragon excerpt: 在models.py中定义了Comment模型,包含id、content、created_at、updated_at字段,并与User和Article模型建立外键关系。schemas.py中定义了…...
【信息安全工程师备考笔记】第三章 密码学基本理论
笔记内容整理自 https://www.bilibili.com/video/BV1X8411175t (B站 崔老夫子老师),老师讲解的非常好,推荐大家看原视频。 第三章 密码学基本理论 3.1 密码学概况 密码编码学:明文 —— > 密文 密码分析学&#x…...
精益数据分析(22/126):解锁创业增长密码与长漏斗分析
精益数据分析(22/126):解锁创业增长密码与长漏斗分析 在创业与数据分析的探索旅程中,我们都在不断寻求新的知识和方法,以提升创业的成功率。我一直期望能和大家共同学习、共同进步,今天就让我们继续深入研…...
【深度强化学习 DRL 快速实践】近端策略优化 (PPO)
PPO(2017,OpenAI)核心改进点 Proximal Policy Optimization (PPO):一种基于信赖域优化的强化学习算法,旨在克服传统策略梯度方法在更新时不稳定的问题,采用简单易实现的目标函数来保证学习过程的稳定性 解决…...
14-DevOps-快速部署Kubernetes
在学习阶段,为了能快速部署Kubernetes,这里用一个快速安装工具:Kubeode,来完成Kubernetes的部署。 接下来部署一个单机,一主一从的Kubernetes。一主一从都部署在同一台服务器上。 在虚拟机新开一个服务器,…...
Java 安全:如何防止 DDoS 攻击?
一、DDoS 攻击简介 DDoS(分布式拒绝服务)攻击是一种常见的网络攻击手段,攻击者通过控制大量的僵尸主机向目标服务器发送海量请求,致使服务器资源耗尽,无法正常响应合法用户请求。在 Java 应用开发中,了解 …...
html+servlet项目中的echart图表
介绍 ECharts 是一款由百度开源的,基于 JavaScript 的可视化图表库,它提供了丰富的图表类型和强大的交互功能,能将数据以直观、美观的图表形式展示出来,广泛应用于数据可视化、商业智能、数据分析等领域。 官网: Ap…...
抖音小程序开发常见问题与代码解决方案
抖音小程序开发常见问题与代码解决方案 一、API调用与组件使用问题 1. 分享卡片样式不生效 问题:通过onShareAppMessage分享的小程序卡片样式显示旧版模板。 代码示例: javascript Page({ onShareAppMessage() { return …...
Springboot 手搓 后端 滑块验证码生成
目录 一、效果演示 二、后端滑块验证码生成思路 三、原理解析 四、核心代码拿走 滑块验证码react前端实现,见我的这篇博客:前端 React 弹窗式 滑动验证码实现_react中使用阿里云滑块验证码2.0前端接入及相关视觉-CSDN博客 一、效果演示 生成的案例…...
QPS说明
QPS(Queries Per Second,每秒查询数)是用于衡量服务器或系统处理请求能力的一个关键性能指标。 它表示服务器在一秒钟内能够处理的查询或请求的数量。 QPS的详细说明: 1. 定义 QPS:每秒查询数,指服务器…...
(六)机器学习---聚类与K-means
到本篇文章,我们先对前几篇所学习的算法进行一个回顾: 而本篇文章我们将会介绍聚类以及K-means算法。 分类问题回归问题聚类问题各种复杂问题决策树√线性回归√K-means√神经网络√逻辑回归√岭回归密度聚类深度学习√集成学习√Lasso回归谱聚类条件随机…...
macOS 更新后找不到钥匙串访问工具的解决方案
macOS 更新后找不到钥匙串访问工具的解决方案 随着macOS的不断更新,一些系统工具的位置可能会发生变化,给用户带来不便。钥匙串访问(Keychain Access)是macOS中一个非常重要的工具,用于管理密码、证书等敏感信息。最近…...
Mac 「brew」快速安装MySQL
安装MySQL 在 macOS 上安装 MySQL 环境可以通过Homebrew快速实现,以下是步骤指南: 方法 1:使用 Homebrew 安装 MySQL 1. 安装 Homebrew 如果尚未安装 Homebrew,可以通过以下命令安装: /bin/bash -c "$(curl -…...
代码随想录算法训练营第五十八天 | 1.拓扑排序精讲 2.dijkstra(朴素版)精讲 卡码网117.网站构建 卡码网47.参加科学大会
1.拓扑排序精讲 题目链接:117. 软件构建 文章讲解:代码随想录 思路: 把有向无环图进行线性排序的算法都可以叫做拓扑排序。 实现拓扑排序的算法有两种:卡恩算法(BFS)和DFS,以下BFS的实现思…...
Flutter Dart中的函数参数 默函数的定义 可选参数 箭头函数 匿名函认参数 命名参类数 闭包等
//使用forEach 打印下面的List里面的数据List list ["西瓜", "苹果", "香蕉"];list.forEach((value) {print(value);});//箭头函数1list.forEach((value) > print(value)); //只能一句//箭头函数2list.forEach((value) >{print(value), /…...
京东平台关键字搜索接口开发指南:Python实现与代码详解
一、接口概述 京东关键字搜索接口允许开发者通过HTTP请求获取平台商品的关键字搜索结果,常用于商品比价、数据分析等场景。本文基于Python演示如何调用京东搜索接口,解析返回数据并实现基础功能。 二、技术实现步骤 接口地址分析 京东未完全公开API…...
告别进度失控:用燃尽图补上甘特图的监控盲区
在职场中,项目经理最头疼的莫过于“计划赶不上变化”。明明用甘特图排好了时间表,任务却总像脱缰野马——要么进度滞后,要么资源分配失衡。甘特图虽能直观展示任务时间轴,但面对突发风险或团队效率波动时,它更像一张“…...
PHP框架在微服务迁移中能发挥什么作用?
微服务架构因其模块化、高可用性和弹性扩展能力,已成为现代分布式系统的核心设计模式。PHP作为一门长期服务于Web开发的脚本语言,其生态中的主流框架(如Laravel、Symfony)通过模块化设计、高效通信机制和丰富的工具链,…...
Linux驱动开发快速上手指南:从理论到实战
Linux驱动开发快速上手指南:从理论到实战 作为嵌入式Linux开发的核心技能之一,驱动开发对于硬件控制至关重要。面对众多章节和概念,初学者常感到无从下手。本文将为你梳理Linux驱动开发的关键路径,提供从理论到实战的完整指导&am…...
第1讲|R语言绘图体系总览(Base、ggplot2、ComplexHeatmap等)
目录 第1讲|R语言绘图体系总览 ✨ 引言:为什么R绘图如此重要? 🧩 1. Base绘图系统 🧩 2. ggplot2生态系统 🧩 3. ComplexHeatmap超级热图系统 🧩 4. 其他特色绘图库(快速了解) ✏️ 小结一句话 📅 预告下一讲 第1讲|R语言绘图体系总览 (Base、ggplot…...
Android FFmpeg 交叉编译全指南:NDK编译 + CMake 集成
开发环境搭建 下载最新版Android Studio,安装SDK和模拟器 在Android Studio中配置:Setting → Android SDK → SDK Tools → 勾选CMake 和 NDK → Apply,按照提示下载安装 SDK是Android应用开发的基础工具包,适合大多数上层逻辑…...
Spring AI 快速入门:从环境搭建到核心组件集成
Spring AI 快速入门:从环境搭建到核心组件集成 一、前言:Java开发者的AI开发捷径 对于Java生态的开发者来说,将人工智能技术融入企业级应用往往面临技术栈割裂、依赖管理复杂、多模型适配困难等挑战。Spring AI的出现彻底改变了这一局面——…...