# 11.1 地图（Map）
此组件为APP内置组件，不需要前端import导入, 可直接在template里使用。前端自行定义图标样式：大小和位置
实例 :
# 基础用法
<template>
<div class="wrapper">
<dof-minibar
title="Map"
background-color="#0092d7"
text-color="#ffffff"
:isImage="true"
:left-button="leftButton"
right-text="Home"
></dof-minibar>
<scroller class="wrapper-main">
<dof-catalog title="使用案例"></dof-catalog>
<midea-map-view class="map" :data="mapData" @marker-pick="markerPick" @point-pick="pointPick"></midea-map-view>
<text class="display-text">
{{JSON.stringify(mapData)}}
</text>
</scroller>
</div>
</template>
<style scoped>
.wrapper {
background-color: #ffffff;
}
.map {
width: 730px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
height: 500px;
}
.display-text {
font-size: 30px;
margin-left: 10px;
margin-right: 10px;
}
</style>
<script>
import { DofMinibar, DofCatalog} from 'dolphin-weex-ui'
import nativeService from 'src/service/nativeService'
export default {
components: {DofMinibar, DofCatalog },
data: () => ({
mapData: {
center: {
latitude: 23.54,
longitude: 113.13,
zoom: 10 //地图显示范围 4-21级 （最大是21级）,非必选
},
markers: [
{
icon: {
normal: "./assets/img/service_ic_pin@3x.png",//正常的图片地址
click: "./assets/img/service_ic_pin@3x.png" //点击高亮的图片地址
},
list: [
{ latitude: 23.14, longitude: 113.3, id: 1 },
{ latitude: 23.74, longitude: 113.73, id: 2 }
]
},
{ //第二组坐标，可换不同坐标
icon: {
normal: "./assets/img/service_ic_pin@3x.png",//正常的图片地址
click: "./assets/img/service_ic_pin@3x.png" //点击高亮的图片地址
},
list: [
{ latitude: 23.24, longitude: 113.53, id: 3 },
{ latitude: 23.4, longitude: 113.93, id: 4 }
]
}
]
}
}),
methods: {
markerPick(item) {
/* item: {
status: 0, //0获取成功
id: xxx //weex设置覆盖物的id值
} */
nativeService.toast("点击了marker id:" + item.id)
},
pointPick(item) {
/* item: {
status: 0, //0获取成功
platform: baidu //默认是百度地图返回的信息，非必选
province: 省名字，
city: 城市名字，
cityCode: 城市编号,
district: 区域名字
latitude: string， //纬度
longitude: string， //经度
} */
nativeService.toast("点击了地图位置:" + JSON.stringify(item))
}
}
}
</script>
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
data | Object | N | 注1 | 包含地图数据的JSON对象： |
- 注1
{
center: {
latitude: 113.54,
longitude: 23.13,
zoom: 10 //地图显示范围 4-21级 （最大是21级）,非必选
},
markers: [
{
icon: {
normal: "./assets/img/service_ic_pin@3x.png",//正常的图片地址
click: "./assets/img/service_ic_pin@3x.png" //点击高亮的图片地址
},
list: [
{ latitude: 113.54, longitude: 23.13, id: 1 },
{ latitude: 153.54, longitude: 23.13, id: 2 }
]
},
{ //第二组坐标，可换不同坐标
icon: {
normal: "./assets/img/service_ic_pin@3x.png",//正常的图片地址
click: "./assets/img/service_ic_pin@3x.png" //点击高亮的图片地址
},
list: [
{ latitude: 173.54, longitude: 23.13, id: 3 },
{ latitude: 193.54, longitude: 23.13, id: 4 }
]
}
],
overlay:{
latitude: 23.54, //围栏中心点纬度
longitude: 113.13, //围栏中心点经度
radius : 10000, //围栏的半径（单位米，要求大于0）
customID : 23412, //用户自定义ID，可选
fillColor : "#000000", //围栏的填充颜色
strokeColor : "#666666", //围栏的边框颜色
lineWidth : "2.0", //围栏边框宽度
}
}
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
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
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
marker-pick | 点击覆盖物后触发 | 注2 |
point-pick | 点击地图的某个点（非覆盖物）后触发 | 注3 |
注2
{
status: 0, //0获取成功
id: xxx //weex设置覆盖物的id值
}
1
2
3
4
2
3
4
注3
{
platform: baidu //默认是百度地图返回的信息，非必选
province: 省名字，
city: 城市名字，
cityCode: 城市编号,
district: 区域名字
latitude: string， //纬度
longitude: string， //经度
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9