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

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

2、注意：自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 的加载：这里使用官方文档推荐的方式，使用JSAPILoader ，并按 NPM 方式使用 Loader。

$ npmi@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.15plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.AMap = AMapthis.map = new AMap.Map("draw-station-container", {//设置地图容器idviewMode: "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.lngthis.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，都会拿到相对应的坐标。点击确定，向父级组件传递坐标（经纬度），完成相关地点的坐标拾取。