高德地图

基于Vue Antd Admin+高德地图进行开发

帮助

高德地图： AMap JSAPI 2.0 文档
基于AntDesignVue封装： AMap-Vue
基于elemnt封装： Vue-AMap

Main.js

import AmapVue from '@amap/amap-vue';
AmapVue.config.version = '2.0'; // 默认2.0，这里可以不修改
AmapVue.config.key = '您的JSAPI KEY';

AmapVue.config.plugins = [
  'AMap.ToolBar',
  'AMap.MoveAnimation',
  'AMap.PlaceSearch',
  "AMap.AutoComplete"
  // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载
];
Vue.use(AmapVue)

mounted生命周期

async mounted() {
	// 地图初始化
    const AMap = await loadAmap();
    await loadPlugins(["AMap.AutoComplete", "AMap.PlaceSearch"]);
    this.ps = new AMap.PlaceSearch({
      pageSize: this.pageSize,
    });
    this.ac = new AMap.AutoComplete();
    // 地图点标记回显
      if (
        this.$props.row.latitude != null &&
        this.$props.row.longitude != null
      ) {
        this.position = [+this.$props.row.longitude,+this.$props.row.latitude];
        console.log(this.position);
      }
}

methods

// 地图
    onMapClick(e) {
      if (e.lnglat) {
        this.position = [e.lnglat.lng, e.lnglat.lat];
        console.log(this.position);
      }
    },
    async search(clear = false) {
      this.mode = "result";
      await this._ready;

      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;
        } 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) {
      const pos = [poi.location.lng, poi.location.lat];
      this.position = [...pos];
      this.center = [...pos];
      this.mode = "search";
    },
    reset() {
      this.ps.setPageIndex(1);
      this.results = [];
      this.tips = [];
      this.total = 0;
      this.mode = "search";
    },

HTML

<!-- 地图 -->
<a-form-item label="地图">
  <a-card
    :body-style="{
      'max-height': '450px',
      'overflow-y': 'scroll',
      'padding-top': 0,
    }"
    class="result-panel"
  >
    <template slot="title">
      <template>
        <div class="map-header">
          <a-form-item style="margin-bottom: 0px; margin-right: 20px">
            <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>
          </a-form-item>

          <a-form-item label="经纬度：" style="margin-bottom: 0px">
            <a-input
              read-only
              :value="positionText"
              style="width: 200px"
            />
          </a-form-item>
        </div>
      </template>
    </template>
    <a-modal
      title="搜索列表"
      :visible="mode === 'result'"
      v-if="mode === 'result'"
      @ok="mode = 'search'"
      @cancel="mode = 'search'"
      footer=""
    >
      <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-modal>
  </a-card>
  <div class="coord-picker">
    <div class="map-container">
      <amap
        cache-key="coord-picker-map"
        mmap-style="amap://styles/whitesmoke"
        async
        :center.sync="center"
        :zoom.sync="zoom"
        is-hotspot
        @click="onMapClick"
      >
        <amap-satellite-layer :visible="satellite" />
        <amap-scale position="LB" />
        <amap-tool-bar
          :position="{
            top: '110px',
            left: '40px',
          }"
        />
        <amap-marker :position.sync="position" draggable />
      </amap>
    </div>
  </div>
</a-form-item>

CSS

.map-container {
  width: 100%;
  height: 250px;
}

.result-panel {
  display: flex;
  flex-direction: column;

  .search-bar {
    display: flex;
    align-items: center;
    .text {
      text-overflow: ellipsis;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .result-list.ant-list-loading {
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.info {
  padding: 6px;
  margin-bottom: 10px;
}
.map-header {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}