Marker

使用

<amap>
  <amap-marker :position="[x, y]" />
</amap>

Source Code

Props

属性名	类型	备注
position	number[2]	支持.sync
icon	string | AMap.Icon
content	string
title	string
visible	boolean
zIndex	number
offset	number[2]
anchor	string
angle	number	支持.sync
clickable	boolean
draggable	boolean
bubble	boolean
zooms	number[2]
cursor	string
topWhenClick	boolean	仅支持单次绑定
label	AMap.LabelOption	见下表
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

LabelOption

属性名	类型	备注
content	string
offset	number[2]
direction	'top' | 'right' | 'bottom' | 'left' | 'center'

Slots

Slot 名	位置
default	默认

Events

事件名	备注
click
dblclick
rightclick
mousemove
mouseover
mouseout
mousedown
mouseup
dragstart
dragging
dragend
moving
moveend
movealong
touchstart
touchmove
touchend

Example

<template>
  <demo-view>
    <template v-slot:control>
      <a-form-item label="position">
        <a-input read-only :value="position1.join(',')" style="width: 180px;" />
      </a-form-item>
      <a-form-item label="anchor">
        <a-select v-model="anchor" style="width: 120px">
          <a-select-option
            v-for="anchor in anchors"
            :key="anchor"
            :value="anchor"
          >
            {{ anchor }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-polyline
        :path="path"
        :stroke-weight="7"
        stroke-color="#32AC2E"
        is-outline
        :border-weight="2"
        outline-color="#fff"
        show-dir
      />

      <amap-marker
        :position.sync="position1"
        :label="{
          content: 'Marker标记带文字，我是可以拖拽的',
          direction: 'bottom',
        }"
        draggable
      />
      <amap-marker :position="position2" :offset="[0, 0]" :anchor="anchor">
        <div class="marker-using-slot">使用slot的Marker</div>
      </amap-marker>
      <amap-marker
        :position="position3"
        :offset="[-22, -40]"
        :label="{
          content: '使用自定义Icon的Marker',
          direction: 'bottom',
        }"
        :icon="markerIcon"
      />

      <amap-marker
        :position.sync="car.pos"
        :angle.sync="car.angle"
        :icon="car.icon"
        :offset="car.offset"
        @amap-ready="onCarReady"
      />
    </template>
  </demo-view>
</template>

<script>
import markerIcon from '../../public/assets/marker-1.svg';
import carIcon from '../../public/assets/car.png';
import { loadPlugins } from '@amap/amap-vue';
const path = Object.freeze(require('../../public/assets/data/path.json'));

export default {
  data() {
    const dx = path[1][0] - path[0][0];
    const dy = path[1][1] - path[0][1];
    return {
      markerIcon,
      car: {
        pos: path[0].slice(0),
        angle: (Math.atan2(dy, dx) * 180) / Math.PI,
        icon: {
          image: carIcon,
          imageSize: [26, 50],
        },
        offset: [-13, -25],
      },
      anchors: Object.freeze([
        'top-left',
        'top-center',
        'top-right',
        'middle-left',
        'center',
        'middle-right',
        'bottom-left',
        'bottom-center',
        'bottom-right',
      ]),
      position1: [116.473571, 39.993083],
      position2: [116.478463, 39.999428],
      position3: [116.464258, 39.999067],
      anchor: 'center',
      path,
    };
  },
  methods: {
    async onCarReady(car) {
      await loadPlugins('AMap.MoveAnimation');
      car.moveAlong(path, {
        speed: 2000,
        circlable: true,
        autoRotation: true,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.marker-using-slot {
  border: 3px solid #000;
  margin: 0;
  white-space: nowrap;
  padding: 0 10px;
  background-color: rgba(255, 255, 255, 0.2);
}
</style>