uniapp城市列表_uni-app 组件 - 地图组件

最新推荐文章于 2025-10-12 12:23:25 发布

原创最新推荐文章于 2025-10-12 12:23:25 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp城市列表

本文详细介绍了uni-app地图组件的使用，包括地图的中心经度和纬度、缩放级别、标记点、路线、圆、控件等属性及事件监听。特别提到了`markers`替代即将移除的`covers`属性，并指出uni-app仅支持gcj02坐标。还深入讲解了`markers`的属性，如经纬度、图标、气泡窗口和标签的设置，以及`polyline`和`circles`的配置。

map 地图

属性名类型默认值说明平台支持longitude Number 中心经度

latitude Number 中心纬度

scale Number 16 缩放级别，取值范围为5-18

markers Array 标记点

covers Array 即将移除，请使用 markers

polyline Array 路线

circles Array 圆

controls Array 控件

include-points Array 缩放视野以包含所有给定的坐标点

show-location Boolean 显示带有方向的当前定位点

@markertap EventHandle 点击标记点时触发

@callouttap EventHandle 点击标记点对应的气泡时触发微信小程序、5+App

@controltap EventHandle 点击控件时触发

@regionchange EventHandle 视野发生变化时触发

@tap EventHandle 点击地图时触发

@updated EventHandle 在地图渲染更新完成时触发微信小程序

注意:covers 属性即将移除，请使用 markers 替代

uniapp只支持gcj02坐标

markers

标记点用于在地图上显示标记的位置

属性说明类型必填备注平台支持id 标记点id Number 否 marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。

latitude 纬度 Number 是浮点数，范围 -90 ~ 90

longitude 经度 Number 是浮点数，范围 -180 ~ 180

title 标注点名 String 否

iconPath 显示的图标 String 是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径

rotate 旋转角度 Number 否顺时针旋转的角度，范围 0 ~ 360，默认为 0

alpha 标注的透明度 Number 否默认1，无透明，范围 0 ~ 1

width 标注图标宽度 Number 否默认为图片实际宽度

height 标注图标高度 Number 否默认为图片实际高度

callout 自定义标记点上方的气泡窗口 Object 否支持的属性见下表，可识别换行符。微信小程序、5+App

label 为标记点旁边增加标签 Object 否支持的属性见下表，可识别换行符。微信小程序、5+App

anchor 经纬度在标注图标的锚点，默认底边中点 Object 否 {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点微信小程序、5+App

marker 上的气泡 callout

属性说明类型平台支持content 文本 String 微信小程序、5+App

color 文本颜色 String 微信小程序、5+App

fontSize 文字大小 Number 微信小程序、5+App

borderRadius callout边框圆角 Number 微信小程序、5+App

bgColor 背景色 String 微信小程序、5+App

padding 文本边缘留白 Number 微信小程序、5+App

display 'BYCLICK':点击显示; 'ALWAYS':常显 String 微信小程序、5+App

textAlign 文本对齐方式。有效值: left, right, center String 微信小程序、5+App

marker 上的气泡 label

属性说明类型

平台支持content 文本 String 微信小程序、5+App

color 文本颜色 String 微信小程序、5+App

fontSize 文字大小 Number 微信小程序、5+App

x label的坐标，原点是 marker 对应的经纬度 Number 微信小程序、5+App

y label的坐标，原点是 marker 对应的经纬度 Number 微信小程序、5+App

borderWidth 边框宽度 Number 微信小程序、5+App

borderColor 边框颜色 String 微信小程序、5+App

borderRadius 边框圆角 Number 微信小程序、5+App

bgColor 背景色 String 微信小程序、5+App

padding 文本边缘留白 Number 微信小程序、5+App

textAlign 文本对齐方式。有效值: left, right, center String 微信小程序、5+App

polyline指定一系列坐标点，从数组第一项连线至最后一项

属性说明类型必填备注平台支持

points 经纬度数组 Array 是 [{latitude: 0, longitude: 0}]

color 线的颜色 String 否 8位十六进制表示，后两位表示alpha值，如：#000000AA

width 线的宽度 Number 否

dottedLine 是否虚线 Boolean 否默认false

arrowLine 带箭头的线 Boolean 否默认false，开发者工具暂不支持该属性微信小程序、5+App

arrowIconPath 更换箭头图标 String 否在arrowLine为true时生效微信小程序、5+App

borderColor 线的边框颜色 String 否微信小程序、5+App

borderWidth 线的厚度 Number 否微信小程序、5+App

circles

在地图上显示圆属性说明类型必填备注

latitude 纬度 Number 是浮点数，范围 -90 ~ 90

longitude 经度 Number 是浮点数，范围 -180 ~ 180

color 描边的颜色 String 否 8位十六进制表示，后两位表示alpha值，如：#000000AA

fillColor 填充颜色 String 否 8位十六进制表示，后两位表示alpha值，如：#000000AA

radius 半径 Number 是

strokeWidth 描边的宽度 Number 否

controls

在地图上显示控件，控件不随着地图移动

属性说明类型必填备注id 控件id Number 否在控件点击事件回调会返回此id

position 控件在地图的位置 Object 是控件相对地图位置

iconPath 显示的图标 String 是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径

clickable 是否可点击 Boolean 否默认不可点击

position

属性说明类型必填备注left 距离地图的左边界多远 Number 否默认为0

top 距离地图的上边界多远 Number 否默认为0

width 控件宽度 Number 否默认为图片宽度

height 控件高度 Number 否默认为图片高度

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

示例：

export default {

data() {

return {

title: 'map',

latitude: 39.909,

longitude: 116.39742,

markers: [{

width : 40,

height: 40,

latitude: 39.909,

longitude: 116.39742,

iconPath: '../../../static/p.png'

}]

}

methods: {

}