Rectangle

使用

<amap>
  <amap-rectangle :bounds="[[swx, swy], [nex, ney]]" />
</amap>

Source Code

Props

属性名	类型	备注
bounds	number[2][2]	支持.sync
zIndex	number
bubble	boolean
cursor	string
strokeColor	string
strokeOpacity	number
strokeWeight	number
strokeStyle	boolean
strokeDasyarray	number[]
fillColor	string
fillOpacity	string
draggable	boolean
visible	boolean
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

amap-vue 独有 Props

属性名	类型	备注
editable	boolean	为true时会开启RectangleEditor，并会触发bounds属性的.sync
editorOpts	object	可选，用于定制RectangleEditor参数，仅支持单次绑定

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="southwest">
        <a-input read-only :value="bounds[0].join(',')" style="width: 180px;" />
      </a-form-item>
      <a-form-item label="northeast">
        <a-input read-only :value="bounds[1].join(',')" style="width: 180px;" />
      </a-form-item>
      <a-form-item label="editable">
        <a-checkbox v-model="editable" />
      </a-form-item>
      <a-form-item label="draggable">
        <a-checkbox v-model="draggable" />
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-rectangle
        :bounds.sync="bounds"
        :fill-color="fill"
        :fill-opacity="0.5"
        :stroke-color="stroke"
        :cursor="draggable ? 'pointer' : 'default'"
        :editable="editable"
        :draggable="draggable"
      />
    </template>
  </demo-view>
</template>

<script>
export default {
  data() {
    return {
      bounds: [
        [116.464411, 39.984033],
        [116.494619, 40.00829],
      ],
      fill: '#409EFF',
      stroke: '#000A58',
      editable: false,
      draggable: true,
    };
  },
};
</script>