Text

使用

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

Source Code

Props

属性名	类型	备注
position	number[2]	支持.sync
text	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	仅支持单次绑定
domStyle	object	对应 AMap 的setStyle*1
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

1. 因为style字段在 Vue 中有特殊处理，故这里使用domStyle作为命名。

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="position.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>
      <a-form-item label="text">
        <a-input v-model="text" style="width: 180px;" />
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-text
        :position.sync="position"
        :anchor="anchor"
        :text="text"
        :dom-style="style"
        draggable
      />
    </template>
  </demo-view>
</template>

<script>
export default {
  data() {
    return {
      anchors: Object.freeze([
        'top-left',
        'top-center',
        'top-right',
        'middle-left',
        'center',
        'middle-right',
        'bottom-left',
        'bottom-center',
        'bottom-right',
      ]),
      position: [116.473571, 39.993083],
      text: '我是文本标记',
      anchor: 'center',
      style: {
        color: '#f00',
      },
    };
  },
};
</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>