# 地图
# 使用
<amap>
<!-- 覆盖物 -->
</amap>
1
2
3
2
3
# Props
属性名 | 类型 | 备注 |
---|---|---|
center | number[2] | 支持.sync |
zoom | number | 支持.sync |
rotation | number | 支持.sync |
pitch | number | 支持.sync |
viewMode | '2D' | '3D' | 仅支持单次绑定 |
features | string[] | |
zooms | number[2] | 仅支持单次绑定 |
dragEnable | boolean | |
zoomEnable | boolean | |
jogEnable | boolean | |
pitchEnable | boolean | |
rotateEnable | boolean | |
animateEnable | boolean | |
keyboardEnable | boolean | |
doubleClickZoom | boolean | |
scrollWheel | boolean | |
touchZoom | boolean | |
touchZoomCenter | boolean | |
showLabel | boolean | |
defaultCursor | string | |
isHotspot | boolean | |
mapStyle | string | |
wallColor | string | 仅支持单次绑定 |
roofColor | string | 仅支持单次绑定 |
skyColor | string | 仅支持单次绑定 |
showBuildingBlock | boolean | 仅支持单次绑定 |
showIndoorMap | boolean | |
mask | number[][] | number[][][] | |
extraOptions | object | 其它未在上面列出的属性,仅支持单次绑定 |
# AMap-Vue Only Props
属性名 | 类型 | 备注 |
---|---|---|
cacheKey | string | (实验性)若指定,则相同cacheKey 的地图将会复用同一个AMap.Map 实例多次开启/关闭地图时速度将得到优化 |
# Events
事件名 | 备注 |
---|---|
complete | |
click | |
dblclick | |
rightclick | |
mapmove | |
movestart | |
moveend | |
hotspotclick | |
hotspotover | |
hotspotout | |
mousemove | |
mousewheel | |
mouseover | |
mouseup | |
mousedown | |
zoomchange | |
zoomstart | |
zoomend | |
dragstart | |
dragging | |
dragend | |
resize | |
touchstart | |
touchmove | |
touchend |
# Example
<template>
<div>
<a-form layout="inline">
<a-form-item label="zoom">
<a-input-number v-model="zoom" />
</a-form-item>
<a-form-item label="center">
<a-input read-only :value="center.join(',')" style="width: 180px;" />
</a-form-item>
<a-form-item label="pitch">
<a-input-number v-model="pitch" :step="5" />
</a-form-item>
<a-form-item label="rotation">
<a-input-number v-model="rotation" :step="5" />
</a-form-item>
</a-form>
<div style="width: 100%; height: 400px;">
<amap
cache-key="map"
ref="map"
view-mode="3D"
map-style="amap://styles/whitesmoke"
async
:zoom.sync="zoom"
:center.sync="center"
:pitch.sync="pitch"
:rotation.sync="rotation"
:show-indoor-map="false"
is-hotspot
@hotspotclick="onHotspotClick"
>
<amap-marker
:position="position"
:label="{
content: 'Hello, AMap-Vue!',
direction: 'bottom',
}"
/>
</amap>
</div>
</div>
</template>
<script>
export default {
data() {
return {
center: [116.473778, 39.990661],
position: [116.473778, 39.990661],
zoom: 14,
pitch: 45,
rotation: 15,
};
},
methods: {
onHotspotClick(e) {
if (e && e.lnglat) {
this.center = [e.lnglat.lng, e.lnglat.lat];
}
},
},
};
</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
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