AMap-Vue

Using AMap with Vue in an easy way.

快速上手 →

Vue 驱动

支持 Vue 的数据绑定、事件绑定、双向绑定、slot 等特性。

简洁至上

无需关心地图的加载、调用，只需要像普通视图组件一样使用。

无缝开发

可以在地图内嵌入 DOM 组件，轻松开发沉浸式地图 UI 程序。

现已支持 AMap JSAPI 2.0！

npm install --save @amap/amap-vue

<template>
  <div style="width: 100%; height: 400px;">
    <amap
      cache-key="home-map"
      map-style="amap://styles/whitesmoke"
      :zoom="15"
      :center="[116.473179, 39.993169]"
    >
      <amap-marker
        :position="[116.473179, 39.993169]"
        :label="{
          content: 'Hello, AMap-Vue!',
          direction: 'bottom',
        }"
      />
    </amap>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18