AMap-Vue

# 介绍

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

与此同时，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

继续阅读

← 安装使用 →