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是地图容器，

，需要给它设置好宽高。

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

引用的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，都会拿到相对应的坐标。点击确定，向父级组件传递坐标（经纬度），完成相关地点的坐标拾取。