Vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能

目录

一、申请密钥

二、安装element-ui

三、安装高德地图依赖

四、完整代码

五、运行截图

---

一、申请密钥

登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。

如图所示填写对应的信息，系统就会自动生成。

二、安装element-ui

没安装的看官方文档：Element - The world's most popular Vue UI framework

三、安装高德地图依赖

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

四、完整代码

把刚才申请好的安全密钥和Key替换进去。

完整代码：

<template><div style="display: flex"><div style="margin-top: 10px"><div><span>搜索地址：</span><el-autocompletev-model="keywords"style="width: 300px":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"></el-autocomplete><span style="margin-left: 10px"><span>经度：{{ form.lng }}</span><span style="margin-left: 10px">纬度：{{ form.lat }}</span><span>地址：{{form.address}}</span></span><el-button style="margin-left: 10px" type="danger" size="small" @click="reset">清空</el-button></div><div id="container" class="container"></div></div></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {// 安全密钥securityJsCode: "安全密钥",
};
export default {name: "HomeView",data() {return {// 地图实例map: null,// 标记点marker: "",// 地址逆解析geoCoder: null,// 搜索提示AutoComplete: null,//缩放控件ToolBar:null,//地图放大镜HawkEye:null,// 搜索关键字keywords: "",// 位置信息form: {lng: "119.793098",lat: "31.91243",address:'',},// 搜索节流阀loading: false,// 搜索提示信息options: [],};},created() {this.initMap();},methods: {reset(){this.keywords = '';this.form = {lng: "119.793098",lat: "31.91243",address: '',}// 清除点this.removeMarker();// 标记点this.setMapMarker();},initMap() {AMapLoader.load({// 你申请的Keykey: "Key",version: "2.0",// 需要用到的插件plugins: ["AMap.Geocoder", "AMap.AutoComplete","AMap.ToolBar","AMap.HawkEye"],}).then((AMap) => {this.map = new AMap.Map("container", {viewMode: "3D", //是否为3D地图模式zoom: 23, //初始化地图级别center: [this.form.lng, this.form.lat], //初始化地图中心点位置});//地址逆解析插件this.geoCoder = new AMap.Geocoder({city: "010", //城市设为北京，默认：“全国”radius: 1000, //范围，默认：500});// 搜索提示插件this.AutoComplete = new AMap.AutoComplete({ city: "全国" });this.ToolBar =  new AMap.ToolBar({position: {bottom: '210px',right: '35px'}});this.HawkEye =  new AMap.HawkEye({position: {bottom: '110px',left: '35px'}});this.map.addControl(this.ToolBar);this.map.addControl(this.HawkEye);// 清除点this.removeMarker();// 标记点this.setMapMarker();//点击获取经纬度;this.map.on("click", (e) => {// 获取经纬度this.form.lng = e.lnglat.lng;this.form.lat = e.lnglat.lat;// 清除点this.removeMarker();// 标记点this.setMapMarker();});}).catch((err) => {// 错误});},// 标记点setMapMarker() {// 自动适应显示想显示的范围区域this.map.setFitView();this.marker = new AMap.Marker({map: this.map,position: [this.form.lng, this.form.lat],});// 逆解析地址this.toGeoCoder();this.map.setFitView();this.map.add(this.marker);},// 清除点removeMarker() {if (this.marker) {this.map.remove(this.marker);}},// 逆解析地址toGeoCoder() {let lnglat = [this.form.lng, this.form.lat];this.geoCoder.getAddress(lnglat, (status, result) => {if (status === "complete") {this.form.address = result.regeocode.formattedAddress;}else {this.form.address = '';}});},querySearchAsync(queryString, cb){if (queryString) {this.AutoComplete.search(queryString, (status, result) => {if(status === 'complete'){this.options = result.tips;for (let i = 0; i < this.options.length; i++) {this.options[i].value = this.options[i].name;}}else {this.options = [];}cb(this.options);});} else {this.options = [];cb(this.options);}},handleSelect(val){// 清空时不执行后面代码if (!val) {return;}this.form = {lng: val.location.lng,lat: val.location.lat,};// 清除点this.removeMarker();// 标记点this.setMapMarker();},},mounted() {},
};
</script><style>
.container {margin-top: 10px;width: 1280px;height: 720px;
}
</style>

五、运行截图

直接运行项目，效果如下：

更多用法请参考官方文档：添加地图控件-入门教程-地图 JS API 2.0 | 高德地图API