扩展自定义组件

当你需要基于 AMap-Vue 开发更多自定义组件的时候，你可以通过内建的withAmap辅助 mixin，并将你的组件嵌套在<amap>组件内，就可以通过this.map访问到地图所关联的AMap.Map实例。

<script>
import { withAmap } from '@amap/amap-vue';

export default {
  name: 'MyCustomMapComponent',
  mixins: [withAmap],
  mounted() {
    this.$map; // 通过this.$map访问到外层的AMap.Map实例
  },
};
</script>

<template>
  <amap>
    <!-- 任意层级嵌套 -->
    <my-custom-map-component />
  </amap>
</template>

这里是一个基本的例子，例中我们调用了this.$map.setFitView和this.$map.setCenter方法，实现了 UI 与地图的简单联合交互。

<template>
  <div class="example-custom-extension">
    <amap
      :is-hotspot="false"
      :show-indoor-map="false"
      :center="[116.473778, 39.990661]"
      :zoom="13"
      map-style="amap://styles/whitesmoke"
    >
      <my-custom-map-component />
    </amap>
  </div>
</template>

<script>
import MyCustomMapComponent from './MyCustomMapComponent';

export default {
  components: { MyCustomMapComponent },
};
</script>

<style lang="less" scoped>
.example-custom-extension {
  width: 100%;
  height: 600px;
}
</style>

<template>
  <div class="my-custom-map-component">
    <amap-marker
      ref="markers"
      v-for="poi in results"
      :key="poi.id"
      :position="[poi.location.lng, poi.location.lat]"
      :label="{
        content: poi === hover ? poi.name : '',
        direction: 'bottom',
      }"
      :z-index="poi === hover ? 110 : 100"
      @mouseover="hover = poi"
      @mouseout="hover = null"
    />

    <a-card
      :head-style="{
        padding: '0 12px',
      }"
      :body-style="{
        'max-height': '450px',
        'overflow-y': 'scroll',
        padding: '0 12px 24px',
      }"
      class="result-panel"
    >
      <template slot="title">
        <template v-if="mode === 'search'">
          <a-input-group compact style="display: flex">
            <a-auto-complete
              v-model="query"
              :data-source="tips"
              placeholder="输入关键词"
              style="flex: 1"
              @search="autoComplete"
            />
            <a-button @click="search(true)" :disabled="!query" type="primary">
              搜索
            </a-button>
          </a-input-group>
        </template>
        <template v-if="mode === 'result'">
          <div class="result-title">
            <a-button icon="left" @click="reset" style="margin-right: 6px;" />
            <span class="count">共 {{ searching ? '...' : total }} 条结果</span>
          </div>
        </template>
      </template>

      <a-list
        v-if="mode === 'result'"
        :data-source="results"
        item-layout="vertical"
        size="small"
        class="result-list"
      >
        <a-pagination
          slot="header"
          v-if="total > 0"
          v-model="pageIndex"
          :page-size="pageSize"
          :total="total"
          size="small"
        />
        <a-list-item slot="renderItem" slot-scope="item" :key="item.id">
          <a-list-item-meta :description="item.address">
            <span slot="title" style="cursor: pointer;" @click="focus(item)">{{
              item.name
            }}</span>
          </a-list-item-meta>
        </a-list-item>
        <a-pagination
          slot="footer"
          v-if="total > 0"
          v-model="pageIndex"
          :page-size="pageSize"
          :total="total"
          size="small"
        />
      </a-list>
    </a-card>
  </div>
</template>

<script>
import { withAmap, loadPlugins } from '@amap/amap-vue';

export default {
  name: 'MyCustomMapComponent',
  mixins: [withAmap],
  data() {
    return {
      mode: 'search',
      query: '',
      searching: false,
      tips: [],
      results: [],
      total: 0,
      hover: null,
      position: null,
      pageIndex: 1,
      pageSize: 20,
    };
  },
  async mounted() {
    await loadPlugins(['AMap.AutoComplete', 'AMap.PlaceSearch']);
    this.ps = new AMap.PlaceSearch({
      pageSize: this.pageSize,
    });
    this.ac = new AMap.AutoComplete();
  },
  methods: {
    async search(clear = false) {
      this.mode = 'result';

      if (clear) {
        this.results = [];
        this.total = 0;
        this.pageIndex = 1;
        this.ps.setPageIndex(1);
      }

      this.searching = true;
      const { query } = this;
      this.ps.search(query, (status, result) => {
        this.searching = false;
        if (query !== this.query) return;

        if (status === 'complete' && result.poiList) {
          this.results = result.poiList.pois;
          this.total = result.poiList.count;
          this.fitView();
        } else {
          this.results = [];
          this.total = 0;
        }
      });
    },
    async autoComplete(kw) {
      if (!kw) {
        this.tips = [];
      } else {
        this.ac.search(kw, (status, result) => {
          if (kw !== this.query) return;
          if (status === 'complete' && result.tips) {
            this.tips = Array.from(new Set(result.tips.map(tip => tip.name)));
          } else {
            this.tips = [];
          }
        });
      }
    },
    focus(poi) {
      this.hover = poi;
      this.$map.setCenter([poi.location.lng, poi.location.lat]);
    },
    fitView() {
      requestAnimationFrame(() => {
        this.$map.setFitView(null, false, [0, 0, 300, 0]);
      });
    },
    reset() {
      this.ps.setPageIndex(1);
      this.results = [];
      this.tips = [];
      this.total = 0;
      this.mode = 'search';
    },
  },
  watch: {
    pageIndex(value) {
      this.ps.setPageIndex(value);
      this.search(false);
    },
  },
};
</script>

<style lang="less" scoped>
.my-custom-map-component {
  .result-panel {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 280px;
    display: flex;
    flex-direction: column;

    .result-list {
      width: 100%;
    }

    .result-list.ant-list-loading {
      min-height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .result-title {
      .count {
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>