地图

使用

<amap>
  <!-- 覆盖物 -->
</amap>

Source Code

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>