Vue 高德地图 输入提示和POI搜索插件结合使用 拾取对应地点坐标
7、效果:在搜索框输入地点名称,产生输入提示,点击某个提示选项后,进行POI搜索,地图会自行标记出搜索地点。点击地图任意位置,或者POI搜索结果的marker,都会拿到相对应的坐标。4、JSAPI 的加载:这里使用官方文档推荐的方式,使用 JSAPI Loader ,并按 NPM 方式使用 Loader。1、准备好高德地图的key和安全密钥jscode,key的平台类型是Web 端 ( JSAPI
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,都会拿到相对应的坐标。点击确定,向父级组件传递坐标(经纬度),完成相关地点的坐标拾取。
更多推荐
所有评论(0)