第15讲 : uni-app 组件 – 地图组件

## 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: { } } ```