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 中集成和操作地图功能。

相关推荐
超人不会飛2 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦5 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想7 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z16 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982421 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴27 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干30 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗32 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder37 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder40 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github