UniApp 内置组件:`<map>` 详解

在 UniApp 开发中,<map> 组件用于展示地图,它封装了原生的地图能力,提供了多项地图控制能力。

简介

<map> 组件是一个全功能的地图组件,支持显示位置、标记点、路线规划等功能。

示例

html 复制代码
<map :latitude="latitude" :longitude="longitude" :markers="markers"></map>

基础属性

  • longitude:经度,范围为 -180 ~ 180。
  • latitude:纬度,范围为 -90 ~ 90。
  • scale:缩放级别,取值范围为 5-18。

控制属性

  • markers:标记点用于在地图上显示标记的位置。
  • polyline:指定一系列坐标点,从数组第一个点连线至最后一个点。
  • circles:在地图上显示圆。
  • controls:地图控件。控件不随着地图移动。

事件

  • bindmarkertap:点击标记点时触发,e.detail = {markerId}。
  • bindcallouttap:点击标记点对应的气泡时触发。
  • bindcontroltap:点击控件时触发,e.detail = {controlId}。

注意事项

  • 确保在使用 <map> 组件之前,已经向相应平台申请了地图使用权限,并正确配置了AK(Access Key)。
  • markers, polyline, circles 等属性接受数组格式,每个元素定义了相应的地图元素属性。

参考链接

在这篇文章中,我们详细介绍了 UniApp 的 <map> 组件,展示了如何使用地图和相关属性。希望本文能帮助您更好地在 UniApp 中集成和操作地图功能。

相关推荐
veneno5 小时前
大量异步并发请求控制并发解决方案
前端
i***t9195 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
oden5 小时前
2025博客框架选择指南:Hugo、Astro、Hexo该选哪个?
前端·html
小光学长5 小时前
基于ssm的宠物交易系统的设计与实现850mb48h(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
java·前端·数据库
小小前端要继续努力6 小时前
渐进增强、优雅降级及现代Web开发技术详解
前端
老前端的功夫7 小时前
前端技术选型的理性之道:构建可量化的ROI评估模型
前端·javascript·人工智能·ubuntu·前端框架
狮子座的男孩7 小时前
js函数高级:04、详解执行上下文与执行上下文栈(变量提升与函数提升、执行上下文、执行上下文栈)及相关面试题
前端·javascript·经验分享·变量提升与函数提升·执行上下文·执行上下文栈·相关面试题
爱学习的程序媛7 小时前
《JavaScript权威指南》核心知识点梳理
开发语言·前端·javascript·ecmascript
乐观主义现代人7 小时前
go 面试
java·前端·javascript
1***Q7848 小时前
前端在移动端中的离线功能
前端