# 介绍
AMap-Vue 是一个基于 Vue.js 的高德地图 AMap JSAPI 封装。
通过它,你能够以近似普通 UI 组件的方式来开发地图应用,而无需关心 AMap 的具体操作。
依托于 Vue.js 的响应式数据机制,你可以对地图、地图上的各种覆盖物、图层进行数据绑定、事件监听、部分属性还可以双向数据绑定。
<div class="my-map">
<amap :zoom.sync="map.zoom" :center.sync="map.center">
<amap-marker
:position="[116.473179, 39.993169]"
:label="{ content: 'Hello, AMap-Vue!', direction: 'bottom' }"
@click="onMarkerClick"
/>
</amap>
</div>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
与此同时,AMap-Vue 会透明地管理地图相关组件的生命周期,你可以使用熟悉的v-if
等方式来声明式地开发应用。
<amap-marker v-if="focusPoint" :position="focusPoint.position" />
1
AMap-Vue 组件封装了对应 AMap 组件的大部分属性和方法,因此你也可以通过$refs
获得组件实例,来命令式地调用它们的方法,如AMap.Map
的setFitView
、AMap.Marker
的moveTo
等。
const marker = this.$refs.carMarker
marker.moveTo(targetPosition, 1000)
1
2
2
继续阅读