uni-app map地图组件应用

map地图组件使用时直接在template中使用标签，标签中可嵌套map属性

map最常用到的属性：

• longitude 中心经度

• latitude 中心纬度

• scale 缩放级别（取值范围为5-18,默认的是16 ，值数越大，放大程度越大，看的越细）

• markers 标记点 （在地图上标记出来的点）

markers属性

id ：标记点id (marker点击事件回调会返回此id)
latitude ：纬度（范围 -90 ~ 90 ）
longitude ：经度（范围 -180 ~ 180 ）
title ：标注点名
iconPath ： 显示的图标
rotate ：旋转角度 （顺时针旋转的角度，范围 0 ~ 360，默认为 0 ）
alpha ：标注的透明度 （ 默认1，无透明，范围 0 ~ 1）
width ： 标注图标宽度 （默认为图片实际宽度 ）
height ：标注图标高度 （默认为图片实际高度 ）
callout ：自定义标记点上方的气泡窗口
label ：为标记点旁边增加标签
anchor ：经纬度在标注图标的锚点

marker的 callout属性
content ：文本
color ： 文本颜色
fontSize ：文字大小
borderRadius ：callout边框圆角
bgColor ：背景色
padding ： 文本边缘留白
display ： BYCLICK':点击显示;'ALWAYS':常显
textAlign ： 文本对齐方式

marker的 label属性
content ：文本
color ： 文本颜色
fontSize ：文字大小
x ： label的坐标，原点是 marker 对应的经纬度
y ： label的坐标，原点是 marker 对应的经纬度
borderWidth ： 边框宽度
borderColor ： 边框颜色
borderRadius ：callout边框圆角
bgColor ：背景色
padding ： 文本边缘留白
textAlign ： 文本对齐方式

• polyline 路线 (可以写两个标记点 然后用路线将它们连接起来)

polyline 属性

points：经纬度数组[{latitude: 0, longitude: 0}]
color：线的颜色
width：线的宽度
dottedLine：是否虚线 ( 默认false )
arrowLine：带箭头的线( 默认false )
arrowIconPath：更换箭头图标(在arrowLine为true时生效)
borderColor：线的边框颜色

• circles 圆

circles属性

latitude：纬度
longitude：经度
color：描边的颜色
fillColor：填充颜色
radius：半径

• controls 控件 (在地图上显示一个控件，但是这个控件并不随着地图移动)

controls 属性

id：控件id (在控件点击事件回调会返回此id)
position：控件在地图的位置 (控件相对地图位置)
iconPath：显示的图标 (项目目录下的图片路径)
clickable：是否可点击 (默认不可点击)

实现如下：

image.png

在template中使用标签