vue使用vue-amap插件（高德地图插件实现定位、搜索、marker标记点）

本文主要是介绍vue使用vue-amap插件（高德地图插件实现定位、搜索、marker标记点），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现简单功能记录一下，有问题的话麻烦指出谢谢！
在这里插入图片描述

需求：进入地图定位当前位置，并标记，点击位置显示标记点，上一个标记点消失，搜索框输入地址，显示位置并标记。

1.在高德开发者平台申请key；
2.安装vue-amap；
npm install vue-amap --save
3.在项目main.js中引入vue-amap

import VueAMap from 'vue-amap';   //引入高德
VueAMap.initAMapApiLoader({key: '写入申请的key',//插件集合plugin: ['AMap.Geolocation',  //定位空间，用来获取和展示用户主机所在的经纬度位置' AMap.Autocomplete ',  //输入提示插件' AMap.PlaceSearch ', //POI搜索插件' AMap.Scale ',   //右下角缩略图插件，比例尺' AMap.OverView ', //地图鹰眼插件' AMap.ToolBar ',  //地图工具条' AMap.MapType ',  //类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制' AMap.PolyEditor ', //编辑 折线多边形' AMap.CircleEditor ',"AMap.Geocoder"     //地图编码]
});

4.在需要地图的组件中调用

<template>
<div class="map_address"><div class="address-wrapper" :style="{width:'100%',height:'100%'}"><el-amap-search-boxclass="search-box":search-option="searchOption"         :on-search-result ="onSearchResult"   ><!-- 搜索条件 是个对象 属性是city城市名，citylimit：false； 搜索回调函数 --></el-amap-search-box><el-amap vid="amap" class="amap-demo"  :amap-manager="amapManager" :plugin="plugin"  :events="events"   :center="center" :zoom="zoom"><!-- 点标记在地图上显示的位置，默认为地图中心点， --><el-amap-markerv-for="(marker,index) in markers":key ="'marker'+index":position ="marker" > </el-amap-marker></el-amap></div>
</div>
</template><script>
//引入获取实例
import {AMapManager} from "vue-amap"
let amapManager= new AMapManager();
let Geocoder;     //先声明变量
export default {data(){const self = this;return{center:[0, 0],loaded:false,zoom: 17,input:"",lng:0,lat:0,amapManager,searchOption: {city: "全国",citylimit: false,},  markers: [],          //标记events:{init:(o)=>{o.getCity((result)=>{console.log(result)})},click:(e)=>{self.center = [e.lnglat.lng, e.lnglat.lat];console.log(self.center)self.markers=[];self.markers.push(self.center)Geocoder.getAddress(self.center, function (status, result) { //根据坐标获取位置if (status === "complete" && result.info === "OK") {console.log(result.regeocode.formattedAddress)self.input = result.regeocode.formattedAddress;document.querySelector(".search-box-wrapper input").value = self.input;}})}},plugin:[{enableHighAccuracy:true,   //是否使用高精度定位，默认truetimeout:100,               //超过10秒后停止定位，默认：无穷大convert:true,          //自动偏移后的坐标为高德坐标，默认：trueshowButton:true,       //显示定位按钮，默认：truebuttonPosition:'RB',  //定位按钮停靠位置，默认'LB'，左下角showMarker:true,      //定位成功后在定位到的位置显示标记，默认：trueshowCircle:true,      //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation:true,   //定位成功后将定位到的位置作为地图中心点，默认truezoomToAccuracy:true,   //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falseextensions:"all",pName:"Geolocation",     //AMap-Geolocation 定位插件events: {init(o) {// o 是高德地图定位插件实例o.getCurrentPosition((status, result) => {console.log(result.position)if (result && result.position) {self.lng = result.position.lng;              //设置经度self.lat = result.position.lat;              //设置纬度self.center = [self.lng,self.lat];          //设置坐标self.markers.push(self.center)              //获取当前定位并存入标记中显示标记点self.loaded = true;                          //loadself.zoom = 14;self.$nextTick();                            //页面渲染好后             }})}}},//Geocoder编码：根据地理名称来获得地点的经纬度{pName:"Geocoder",events:{init:(o)=>{Geocoder = o; // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用//data里的events中使用了Geocodero.getAddress(self.center, function (status, result) { //根据坐标获取位置if (status === "complete" && result.info === "OK") {self.input = result.regeocode.formattedAddress;document.querySelector(".search-box-wrapper input").value = self.input;  } })}}}]}},methods:{//点击搜索后触发的事件onSearchResult(pois){console.log(pois)     this.input = document.querySelector('.search-box-wrapper input').value this.center = [pois[0].lng,pois[0].lat]        //选择了第一个值this.markers = [];    //标记点先清空  this.markers.push([pois[0].lng,pois[0].lat])   //把搜索的位置的第一个值存入标记中并显示标记点console.log(this.markers);}}}</script><style scoped lang="less">
.map_address{height:100vh;
}
.address-wrapper{display:flex;flex-direction:column;
}
.search-box{width:100vw;height:40px;
}
.amap-demo{flex:1;height:100vh;
}
</style>