小程序—地图
目前地图组件只在小程序中可以运行,APP端还在开发中
调用小程序的地图能力,包括了展现位置,设置标记点,路线,圆,控件等。由于地图组件上的能力比较分散,需要的数据量相对比 较大,数据的层级结构也比其他组件更加繁琐一些。为了解决这些问题,在设计组件时,我们用到了一个专门针对地图组件上能力的编辑器。通过这个编辑器,来编辑地图上的标记点,圆,控件等能力。当然使用这个编辑器,是需要一定的规范的,下面来具体介绍地图组件的能力,使用及编辑器的规范。
属性
属性 | 说明 | 默认值 | 类型 | 备注 |
---|---|---|---|---|
longitude | 中心经度 | Double | ||
latitude | 中心纬度 | Double | ||
scale | 缩放级别(5~18) | 16 | Integer | |
markers | 标记点 | Array | 编辑器设计 | |
polyline | 路线 | Array | 编辑器设计 | |
circle | 圆 | Array | 编辑器设计 | |
controls | 控件 | Array | 编辑器设计 | |
show-location | 显示当前定位点 | Boolean | 配合路线使用 |
在属性中,标记点,路线,圆和控件,的数据类型是Array(数组),因此,地图组件的这类属性,需要接受的数据是一个数组,数组的来源,就是我们的数据。下面编辑器的使用和绑定数据的规范。如图,通过地图组件的地图配置,打开地图编辑器。编辑器可以设置标记点,路线,圆,控件四个属性下面一一介绍,他们的用法
标记点设置
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
data | 标记点数据集 | Data | 是 | 标记点数据来源 |
id | 标记点id | Integer | 否 | 用于区分标记点 |
latitude | 纬度 | Double | 是 | 范围 -90~90 |
longitude | 经度 | Double | 是 | 范围 -180-180 |
title | 标记点名 | String | 否 | |
iconPath | 标记点图片 | Image | 是 | |
rotate | 旋转角度 | Integer | 否 | 0~360 顺时针 |
alpha | 透明度 | Integer | 否 | 0~1模式为1不透明 |
width | 宽度 | Double | 否 | |
height | 高度 | Double | 否 | |
callout | 气泡 | Object | 否 | 支持属性见下表 |
label | 标签 | Object | 否 | 支持属性见下表 |
标记点上的气泡 callout
属性 | 说明 | 类型 | 备注 |
---|---|---|---|
content | 文本 | String | 需要从数据集中来 |
color | 文本颜色 | String | |
fontSize | 字体大小 | Integer | |
borderRadius | 边框圆角 | integer | |
bgColor | 背景颜色 | String | |
padding | 文本边留白 | Integer | |
display | 显示模式 | Integer | BYCLICK(点击)AWAYS(常显) |
textAlign | 对齐方式 | String |
标记点上的标签 label
属性 | 说明 | 类型 | 备注 |
---|---|---|---|
content | 文本 | String | 需要从数据集中来 |
color | 文本颜色 | String | |
fontSize | 字体大小 | Integer | |
borderWidth | 边框宽度 | Integer | |
borderRadius | 边框圆角 | integer | |
bgColor | 背景颜色 | String | |
padding | 文本边留白 | Integer | |
x | label的横坐标 | Integer | 原点为标记点位置 |
y | label纵坐标 | Integer | 原点为标记点位置 |
textAlign | 对齐方式 | String |
上面介绍了标记点的属性,接下来我们说如果设置这些属性。
使用地图的标记能力,需要用户有一个数据集来存放标记点信息的数据,在创建数据的面板创建一个数据集,存放经纬度,图标等等,将设计好的数据集拖入页面后,打开地图编辑器,选择数据集,这里需要告诉地图组件标记的数据都在那里,设计好数据集之后,开始分配每个属性,注意,这些数据一定标记点的所有数据全部要您事先设计好的数据集中来,这里特别注意,由于标记点的气泡,和标签,这两个属性需要的也是一个对象,数据的复杂结构,里面的文本是需要从数据集中来的,而其他内容是自行填写的。下面展示一个标记点的基本数据结构(特别注意,数据集按照标记点的属性创建,气泡和标签的文本也需要加入到数据集中):
路线设置 polyline
指定一系列坐标点,从数据集第一项连线至最后一项
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
data | 路线数据集 | Data | 是 | 路线数据来源 |
pointsLatitude | 点的纬度 | Double | 是 | |
pointsLongitude | 点的经度 | Double | 是 | |
width | 线的宽度 | Double | 否 | |
color | 线的颜色 | String | 否 | |
dottedLine | 是否虚线 | Boolean | 否 | |
arrowLine | 带箭头的线 | Boolean | 否 | |
arrowIconPath | 箭头图标 | String | 否 | |
borderColor | 线边的颜色 | String | 否 | |
borderWidth | 线的厚度 | Double | 否 |
关于线的设计,会把每一组经纬度形成的点,按照数据顺序连成线。因此在使用该能力时,需要绑定一个数据集,点的经纬度需要从绑定的数据集中获取,这里的用法和标记点相同。
圆的设计 circles
在地图上显示圆
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
data | 圆数据集 | Data | 是 | 圆数据的来源 |
latitude | 圆心纬度 | Double | 是 | |
longitude | 圆心经度 | Double | 是 | |
color | 描边颜色 | String | 否 | |
fillColor | 填充颜色 | String | 否 | |
radius | 圆的半径 | Double | 是 | |
strokeWidth | 描边宽度 | Double | 否 |
控件的设置 controls
在地图上显示控件,控件不随着地图移动
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
id | 控件id | Number | 否 | |
position | 控件在地图的位置 | Object | 是 | 控件相对地图位置 |
iconPath | 显示的图标 | String | 是 | |
clickable | 是否可点击 | Boolean | 否 | 默认不可点击 |
示例
在手机中测试数据的展现显示,由于在设计地这些功能使用图片图标等,均使用的是临时路径,因此在编辑器中无法正确显示,需要在手机中查看。
Bug & Tip
tip
:map
组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。tip
: 请勿在scroll-view
、swiper
、picker-view
、movable-view
中使用map
组件。tip
:css
动画对map
组件无效。tip
:map
组件使用的经纬度是火星坐标系,调用wx.getLocation
接口需要指定type
为gcj02