InfoWindow

使用

<amap>
  <amap-info-window :position="position" :vislble="visible" is-custom>
    <div>content of this info window</div>
  </amap-info-window>
</amap>

Source Code

Props

属性名	类型	备注
isCustom	boolean	若为true，则必须搭配default slot使用
content	string	若is-custom为true，此属性将被忽略`
autoMove	boolean	仅支持单次绑定
avoid	number[4]	仅支持单次绑定
closeWhenClickMap	boolean	仅支持单次绑定
size	number[2]	仅支持单次绑定
offset	number[2]	仅支持单次绑定
anchor	string
position	number[2]	支持.sync
visible	boolean	支持.sync
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

Slots

Slot 名	位置
default	默认

Events

事件名	备注
open
close

Example

<template>
  <demo-view
    class="info-window-example"
    @map-complete="onMapComplete"
    @map-click="onMapClick"
  >
    <template v-slot:control>
      <a-form-item v-for="(aoi, i) in aois" :key="i" :label="`第${i}个AOI`">
        <!-- <a-input read-only :value="aoi.comment" style="width: 120px;" /> -->
        {{ aoi.comment }}
      </a-form-item>
    </template>

    <template v-slot:map-content>
      <amap-marker
        v-for="(aoi, i) in aois"
        :key="`marker-${i}`"
        :position.sync="aoi.position"
        :z-index="150"
        clickable
        @click="onMarkerClick(aoi)"
      />

      <amap-info-window
        :visible="!!activeAoi"
        :position="activeAoi ? activeAoi.position : null"
        :offset="[0, -30]"
        auto-move
        is-custom
      >
        <div class="info-window-content" v-if="activeAoi">
          <a-card shadow="always">
            <a-icon
              type="close"
              class="button-close"
              @click="activeAoi = null"
            />
            <h3>该点的位置</h3>
            <div>{{ activeAoi.position[0] }}, {{ activeAoi.position[1] }}</div>
            <div>
              <a-input v-model="activeAoi.comment" placeholder="编辑备注" />
            </div>
          </a-card>
        </div>
      </amap-info-window>
    </template>
  </demo-view>
</template>

<script>
const aois = [
  [116.465812, 39.991939],
  [116.4712, 39.996749],
  [116.470788, 39.989426],
  [116.475671, 40.000064],
  [116.46557, 39.999829],
].map((position, i) => ({
  position,
  comment: `备注-${i}`,
}));

export default {
  data() {
    return {
      aois,
      activeAoi: aois[0],
    };
  },
  methods: {
    onMapComplete(map) {
      map.setFitView();
    },
    onMapClick() {
      this.activeAoi = null;
    },
    onMarkerClick(p) {
      this.activeAoi = p;
    },
  },
};
</script>

<style lang="less" scoped>
.info-window-content {
  position: relative;
  width: 220px;

  h3 {
    margin-top: 0;
  }

  .button-close {
    position: absolute;
    right: 0.5em;
    top: 0.5em;

    cursor: pointer;
  }
}
</style>