# map
地图。相关 api qa.createMapContext。
组件属性的长度单位默认为 px,支持传入单位(rpx/px)。
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
longitude | number | 是 | 中心经度 | |
latitude | number | 是 | 中心纬度 | |
scale | number | 16 | 否 | 缩放级别,取值范围为 3-20 |
markers | Array.<marker> | 否 | 标记点 | |
polyline | Array.<polyline> | 否 | 路线 | |
circles | Array.<circle> | 否 | 圆 | |
controls | Array.<control> | 否 | 控件(即将废弃,建议使用 cover-view 代替) | |
include-points | Array.<point> | 否 | 缩放视野以包含所有给定的坐标点 | |
show-location | boolean | false | 否 | 显示带有方向的当前定位点 |
polygons | Array.<polygon> | 否 | 多边形 | |
show-compass | boolean | false | 否 | 显示指南针 |
enable-overlooking | boolean | false | 否 | 开启俯视 |
enable-zoom | boolean | true | 否 | 是否支持缩放 |
enable-scroll | boolean | true | 否 | 是否支持拖动 |
enable-rotate | boolean | false | 否 | 是否支持旋转 |
bindtap | eventhandle | 否 | 点击地图时触发 | |
bindmarkertap | eventhandle | 否 | 点击标记点时触发,会返回 marker 的 id | |
bindcontroltap | eventhandle | 否 | 点击控件时触发,会返回 control 的 id | |
bindcallouttap | eventhandle | 否 | 点击标记点对应的气泡时触发,会返回 marker 的 id | |
bindupdated | eventhandle | 否 | 在地图渲染更新完成时触发 | |
bindregionchange | eventhandle | 否 | 视野发生变化时触发 | |
bindpoitap | eventhandle | 否 | 点击地图 poi 点时触发 |
# marker
标记点用于在地图上显示标记的位置
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。 |
latitude | 纬度 | number | 是 | 浮点数,范围 -90 ~ 90 |
longitude | 经度 | number | 是 | 浮点数,范围 -180 ~ 180 |
title | 标注点名 | string | 否 | 点击时显示,callout 存在时将被忽略 |
zIndex | 显示层级 | number | 否 | |
iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对快应用根目录;也支持临时路径和网络图片 |
rotate | 旋转角度 | number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 |
alpha | 标注的透明度 | number | 否 | 默认 1,无透明,范围 0 ~ 1 |
width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 |
height | 标注图标高度 | number/string | 否 | 默认为图片实际高度 |
callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表,可识别换行符。 |
label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表,可识别换行符。 |
anchor | 经纬度在标注图标的锚点,默认底边中点 | Object | 否 | {x, y},x 表示横向(0-1),y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 |
# marker 上的气泡 callout
属性 | 说明 | 类型 |
---|---|---|
content | 文本 | string |
color | 文本颜色 | string |
fontSize | 文字大小 | number |
borderRadius | 边框圆角 | number |
bgColor | 背景色 | string |
padding | 文本边缘留白 | number |
display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string |
textAlign | 文本对齐方式。有效值: left, right, center | string |
# marker 上的气泡 label
属性 | 说明 | 类型 |
---|---|---|
content | 文本 | string |
color | 文本颜色 | string |
fontSize | 文字大小 | number |
anchorX | label 的坐标,原点是 marker 对应的经纬度 | number |
anchorY | label 的坐标,原点是 marker 对应的经纬度 | number |
borderRadius | 边框圆角 | number |
bgColor | 背景色 | string |
padding | 文本边缘留白 | number |
textAlign | 文本对齐方式。有效值: left, right, center | string |
# polyline
指定一系列坐标点,从数组第一项连线至最后一项形成曲线
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] |
color | 线的颜色 | string | 否 | |
width | 线的宽度 | number | 否 | |
dottedLine | 是否虚线 | boolean | 否 | 默认 false |
arrowLine | 带箭头的线 | boolean | 否 | 默认 false,开发者工具暂不支持该属性 |
arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 |
# polygon
指定一系列坐标点,根据 points 坐标数据生成闭合多边形
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] |
strokeWidth | 描边的宽度 | number | 否 | |
strokeColor | 描边的颜色 | string | 否 | |
fillColor | 填充颜色 | string | 否 | |
zIndex | 设置多边形 Z 轴数值 | number | 否 |
# circle
在地图上显示圆
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
latitude | 纬度 | number | 是 | 浮点数,范围 -90 ~ 90 |
longitude | 经度 | number | 是 | 浮点数,范围 -180 ~ 180 |
color | 描边的颜色 | string | 否 | |
fillColor | 填充颜色 | string | 否 | |
radius | 半径 | number | 是 | |
strokeWidth | 描边的宽度 | number | 否 |
# control
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
id | 控件 id | number | 否 | 在控件点击事件回调会返回此 id |
position | 控件在地图的位置 | object | 是 | 控件相对地图位置 |
iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对快应用根目录;也支持临时路径 |
clickable | 是否可点击 | boolean | 否 | 默认不可点击 |
# position
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
left | 距离地图的左边界多远 | number | 否 | 默认为 0 |
top | 距离地图的上边界多远 | number | 否 | 默认为 0 |
width | 控件宽度 | number | 否 | 默认为图片宽度 |
height | 控件高度 | number | 否 | 默认为图片高度 |
# bindregionchange 返回值
属性 | 说明 | 类型 | 备注 |
---|---|---|---|
type | 视野变化开始、结束时触发 | string | 视野变化开始为 begin,结束为 end |
# Bug & Tip
- 地图中的颜色值 color/bgColor/strokeColor/fillColor 等使用 6 位(8 位)十六进制表示,8 位时后两位表示 alpha 值,如:#000000AA,或者使用'rgb(0,0,0)','rgba(0,0,0,0.8)'表示。
- 地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
map
组件使用的经纬度是国测局坐标系,调用 qa.getLocation 接口需要指定type
为gcj02
- 请注意原生组件使用限制。
# 使用效果
![map](/assets/img/map.71f97980.gif)
# 示例代码
<!-- map.qxml -->
<map
id="map"
longitude="114.0596562624"
latitude="22.5681825638"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location
style="width: 100%; height: 300px;"
></map>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
// map.js
Page({
data: {
markers: [
{
iconPath: 'marker.jpg',
id: 0,
latitude: 22.5681825638,
longitude: 114.0596562624,
width: 50,
height: 50
}
],
polyline: [
{
points: [
{
longitude: 114.0596562624,
latitude: 22.5681825638
},
{
longitude: 119.07,
latitude: 22.5681825638
}
],
color: '#000000',
width: 2,
dottedLine: true
}
],
controls: [
{
id: 1,
iconPath: 'control.jpg',
position: {
left: 100,
top: 200,
width: 50,
height: 50
},
clickable: true
}
]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
←
→
在线客服