Vue 高德地图 输入提示和POI搜索插件结合使用 拾取对应地点坐标

1、准备好高德地图的key和安全密钥jscode，key的平台类型是Web 端 ( JSAPI )。

2、注意：自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用。

3、建一个key和密钥的配置文件，src\settings\amap.config.js

// Web端
const JS_API_KEY = '你的key'
// 安全密钥
const JS_CODE = '你的密钥'


// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: JS_CODE
}

module.exports = {
  JS_API_KEY,
  JS_CODE
}

 如上述代码，在配置文件中设置安全密钥，这样只要外部引用key就会执行 设置安全密钥 的代码。

4、JSAPI 的加载：这里使用官方文档推荐的方式，使用 JSAPI Loader ，并按 NPM 方式使用 Loader。

$ npm i @amap/amap-jsapi-loader --save

5、这样就可以在vue中使用了，例如引入地图：

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

 container是地图容器，<div id="container"></div>，需要给它设置好宽高。

6、基于高德地图建立功能组件 （输入提示和POI搜索插件结合使用 拾取对应地点坐标），组件完整代码：

<template>
  <div class="drawStation">
    <div class="input">
      <div>
        <span>关键字搜索：</span>
        <el-input id="tipinput" v-model="tipinput" size="small"></el-input>
      </div>
      <div>
        <span>经度：</span>
        <el-input v-model="location.lng" size="small"></el-input>
        <span>纬度：</span>
        <el-input v-model="location.lat" size="small"></el-input>
        <el-button type="primary" @click="handleDrawStation" size="small">确定</el-button>
      </div>
    </div>
    <div id="draw-station-container"></div>
  </div>
</template>

<script>
import {JS_API_KEY} from '@/settings/amap.config'
import AMapLoader from "@amap/amap-jsapi-loader"
import { isEmpty } from '@/utils'

export default {
  name: "DrawStation",
  data() {
    return {
      // 地图对象
      AMap: null,
      // 地图实例对象
      map: null,
      // 经纬度
      location: {
        lat: '',
        lng: ''
      },
      // 搜索输入
      tipinput: '',
      auto: null,
      placeSearch: null
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  },
  methods: {
    /**
     * 创建地图
     */
    initMap() {
      AMapLoader.load({
        key: JS_API_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
      .then((AMap) => {
        this.AMap = AMap
        this.map = new AMap.Map("draw-station-container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 15, //初始化地图级别
          center: [117.237485, 31.702453], //初始化地图中心点位置
          // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
        })

        // 地图控件
        this.map.addControl(new AMap.Scale())
        // 搜索框自动完成类
        this.auto = new AMap.AutoComplete({
          input: "tipinput"
        })
        //构造地点查询类
        this.placeSearch = new AMap.PlaceSearch({
          map: this.map
        })

        // 当选中某条搜索记录时触发
        this.auto.on("select", this.select)
        // poi覆盖物点击事件
        this.placeSearch.on("markerClick", this.clickMarkerHandler)
        // 地图点击事件
        this.map.on('click', this.clickMapHandler)

      })
      .catch((e) => {
        console.log(e)
      })
    },

    // 当选中某条记录时会触发
    select(e) {
      this.placeSearch.setCity(e.poi.adcode)
      this.placeSearch.search(e.poi.name) //关键字查询查询
    },

    // 点击地图事件
    clickMapHandler(e) {
      this.location.lng = e.lnglat.getLng()
      this.location.lat = e.lnglat.getLat()
    },
    // 点击poi覆盖物事件 
    clickMarkerHandler(e) {
      this.location.lng = e.data.location.lng
      this.location.lat = e.data.location.lat
    },
    // 确定拾取坐标点
    handleDrawStation() {
      if(isEmpty(this.location.lng) || isEmpty(this.location.lat)) {
        return this.$message.error('请先拾取坐标点')
      }
      this.$emit('selectLocation', this.location)
    }

  },
  beforeDestroy() {
    // 销毁地图
    if(this.map) this.map.destroy()
  },
  
};
</script>

<style lang="scss" scoped>
.drawStation {

  #draw-station-container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: calc(100vh - 334px);
  }

  .input {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .el-input {
      width: 220px;
      margin-right: 20px;
    }
  }
}
</style>

引用的isEmpty 是自定义的判断变量是否为空的方法。

/**
 * 判断变量是否为空
 * @param {*} obj 
 * @returns 
 */
export const isEmpty = (obj) => {
  if (typeof obj == "undefined" || obj == null || (typeof obj == "string" && obj.trim() == "") || (typeof obj == 'object' && obj.length == 0)) {
    return true
  } else {
    return false
  }
}

7、效果：在搜索框输入地点名称，产生输入提示，点击某个提示选项后，进行POI搜索，地图会自行标记出搜索地点。点击地图任意位置，或者POI搜索结果的marker，都会拿到相对应的坐标。点击确定，向父级组件传递坐标（经纬度），完成相关地点的坐标拾取。