vue中使用高德地图POI

一、使用AMap-Vue

地址：坐标拾取工具 | AMap-Vue

安装

yarn add @amap/amap-vue # 或 npm install --save @amap/amap-vue

二、引入在main.js

import AmapVue from '@amap/amap-vue'

AmapVue.config.version = '2.0' // 默认2.0，这里可以不修改
AmapVue.config.key = '申请的key值'
Vue.use(AmapVue)

三、使用

<template>
  <div style="width: 100%; height: 400px;">
    <amap
      cache-key="coord-picker-map"
      mmap-style="amap://styles/whitesmoke"
      async
      :center.sync="center"
      :zoom.sync="zoom"
      is-hotspot
      @click="onMapClick"
    >
      <amap-marker v-if="position" :position.sync="position" draggable />
      <el-col :span="7">
        <el-card shadow="always">
          <div v-if="mode === 'search'" style="display: flex;justify-content: space-between;">
            <el-autocomplete
              v-model="query"
              style="width: 80%;"
              class="inline-input"
              :fetch-suggestions="querySearch"
              placeholder="请输入关键词"
              :trigger-on-focus="false"
              @select="handleSelect"
            />
            <el-button type="primary" :disabled="!query" @click="mapSearch">搜索</el-button>
          </div>
          <template v-if="mode === 'result'">
            <div class="search-bar">
              <el-button icon="el-icon-arrow-left" @click="reset" />
              <span
                class="text"
              >搜索 {{ query }} 共
                {{ total }} 条结果</span>

            </div>
            <el-pagination
              v-if="total > 0"
              layout="prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
            />
            <div v-for="option in results" :key="option.id" class="addressList" @click="focus(option)">
              <div style="font-size:15px">{{ option.name }}</div>
              <div style="font-size:10px">{{ option.address }}</div>
            </div>
          </template>
        </el-card>
      </el-col>
    </amap>
  </div>
</template>
<script>
import Amap from '@amap/amap-vue/lib/amap'
import { loadAmap, loadPlugins } from '@amap/amap-vue'
export default {
  components: { Amap },
  data() {
    return {
      zoom: 10,
      mode: 'search', // 地图搜索的标识
      total: 0, // 一共多少页面
      tips: [],
      query: '', // 搜索的值
      showMap: false, // 弹出框
      pageSize: 10, // 分页个数
      results: [], // 返回的数据
      position: '', // 坐标地址
      center: null // 地图地址
    }
  },
  watch: {
    pageIndex(value) {
      this.ps.setPageIndex(value)
    }
  },
  async mounted() {
    const AMap = await loadAmap()
    await loadPlugins(['AMap.PlaceSearch', 'AMap.AutoComplete'])

    this.ps = new AMap.PlaceSearch({
      pageSize: this.pageSize
    })
    this.ac = new AMap.AutoComplete()
  },
  methods: {
    // 匹配的值
    querySearch(queryString, cb) {
      if (!queryString) {
        cb([])
      } else {
        this.ac.search(queryString, (status, result) => {
          if (queryString !== this.query) return
          if (status === 'complete' && result.tips) {
            const tips = Array.from(new Set(result.tips.map(tip => {
              return {
                value: tip.district + tip.name
              }
            })))
            cb(tips)
          } else {
            cb([])
          }
        })
      }
    },
    // 点击确认
    search(item) {
      this.showMap = false
      item.address = this.addressName
    },
    // 点击搜索
    mapSearch() {
      this.mode = 'result'
      this.getMapList()
    },
    // map地图返回按钮
    reset() {
      this.ps.setPageIndex(1)
      this.results = []
      this.tips = []
      this.total = 0
      this.mode = 'search'
    },
    // 点击搜索的地址
    focus(poi) {
      console.log('poi', poi)
      this.addressName = poi.name
      const pos = [poi.location.lng, poi.location.lat]
      this.position = [...pos]
      this.center = [...pos]
    },
    // 点击分页器
    handleCurrentChange(val) {
      this.pageIndex = val
      this.ps.setPageIndex(val)
      this.getMapList()
    },
    onMapClick(e) {
      if (e.lnglat) {
        this.position = [e.lnglat.lng, e.lnglat.lat]
      } else {
        this.position = null
      }
    },
    // 获取搜索显示的列表
    getMapList() {
      const { query } = this
      this.ps.search(query, (status, result) => {
        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
        }
      })
    },
    // 点击选择地图
    mapSelection() {
      this.showMap = true
      this.query = ''
      this.results = []
      this.total = 0
      this.pageIndex = 1
      this.ps.setPageIndex(1)
    }
  }
}
</script>