小程序—地图

目前地图组件只在小程序中可以运行,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
  1. tip:map组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。
  2. tip: 请勿在scroll-viewswiperpicker-viewmovable-view中使用map组件。
  3. tip:css动画对map组件无效。
  4. tip:map组件使用的经纬度是火星坐标系,调用wx.getLocation接口需要指定typegcj02

results matching ""

    No results matching ""

    results matching ""

      No results matching ""