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

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

vue高德地图（三）：搜索地点并标记；绘制路线
<div><div class="searchWrap"><input type ...
vue高德地图搜索功能
一.开发环境: vue版本:v2.5.2 vue-cli版本:v2.9.3 webpack版本:3.6.0 高德地图api版本:JavaScript API V1.4.12 二.直入主题首先在,in ...
vue高德地图学习直接看最后推荐
前言: 高德地图文档很少,没有案例,又想学习一下高德地图基本使用此致敬礼记录一下文档地址:https://elemefe.github.io/vue-amap 直接看最后推荐引入方式一:全局 ...
vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
vue 高德地图定位插件地图实例插件获取点击的地方的经纬度和具体地址
npm 安装推荐 npm 安装. npm install vue-amap --saveimport VueAMap from 'vue-amap';Vue.use(VueAMap); VueAMa ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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