vue-amap 实现高德地图定位 + 搜索 +回显

本文主要是介绍vue-amap 实现高德地图定位 + 搜索 +回显，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.注册成为开发者  -》 申请秘钥key 调用高德api

高德地图开放平台：https://lbs.amap.com/?ref=https://console.amap.com/dev/index

此处有详细步骤：(注：有些功能-》申请的 key 必须配备安全密钥 jscode 一起使用)

此处有详细步骤：Vue（vue-amap） 接入高德地图获取坐标与地址信息_Your-Nikee的博客-CSDN博客_vue-amap 根据地点查询坐标

2.安装vue-amap 依赖

npm install vue-amap --save

3. 在项目 main.js 中引入 （根据所需功能引入）

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.在需要地图的组件中调用

1.  map子页面 

html：

一些属性：   
<!--amap-manager： 地图管理对象vid：地图容器节点的IDzooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默 认范围[3-19]，取值范围[3-19]center： 地图中心点坐标值plugin：地图使用的插件events： 事件-->

 

<template><div class="amap-page-container"><!-- 搜索条件 是个对象searchOption 属性是city城市名，citylimit：false； 搜索回调函数 --><el-amap-search-boxclass="search-box":search-option="searchOption":on-search-result="onSearchResult"></el-amap-search-box><el-amapref="map"vid="amapDemo":amap-manager="amapManager":center="center":zoom="12":plugin="plugin":events="events"class="amap-demo"><!-- 点标记在地图上显示的位置，默认为地图中心点， --><el-amap-marker:position="marker.position":events="marker.events":visible="marker.visible":draggable="marker.draggable"></el-amap-marker></el-amap></div>
</template>

js： 地理编码与逆地理编码-服务-教程-地图 JS API v2.0 | 高德地图API

<script>
import VueAMap from "vue-amap";
const amapManager = new VueAMap.AMapManager();  //获取实例中 的画布
// let Geocoder;
export default {name: "amaps",props: ["Nowlnglat"],   //接受父页面的经纬度data() {let self = this; //定义当前对象(data) 为 selfreturn {amapManager,//搜索条件searchOption: {city: "全国",   //范围citylimit: false, //是否限制城市内搜索},marker: {//   position: [118.054927, 36.813487], //坐标position: [0, 0], //坐标events: {click: (e) => {console.log("点击maker", e);this.marker = null;},//点标记拖拽移动结束触发事件dragend: (e) => {console.log("---event---: dragend", e);this.marker.position = [e.lnglat.lng, e.lnglat.lat];},},visible: true,    //点标记是否可见，默认为true。draggable: false, //设置点标记是否可拖拽移动，默认为false。template: "<span>1</span>",},lng: 0, //经度lat: 0, //纬度clicklnglat:[],center: [0, 0],//el-amap绑定一个事件  （点击）获取当前位置的经纬度events: {init: (o) => {o.getCity((result) => {// console.log(result);});},//点击获取 当前位置的经纬度click: (e) => {// if (!!this.marker) {//获取点击后的经纬度self.lng = e.lnglat.lng;self.lat = e.lnglat.lat;self.center = [e.lnglat.lng, e.lnglat.lat];  //设置范围中心点self.marker.position = [self.lng, self.lat];//存储 点击后经纬度sessionStorage.setItem("maplng", self.lng);sessionStorage.setItem("maplat", self.lat);console.log("点击后", sessionStorage.getItem("maplng"));console.log("点击后",sessionStorage.getItem("maplat"));// } // else {// this.marker = {//   position: [e.lnglat.lng, e.lnglat.lat],//   events: {//     click: (e) => {//       console.log("点击maker", e);//       this.marker = null;//     },//     dragend: (e) => {//       console.log("---event---: dragend", e);//       this.marker.position = [e.lnglat.lng, e.lnglat.lat];//     },//   },//   visible: true,//   draggable: false,//   template: "<span>1</span>",// };// }//Geocoder编码：根据地理名称来获得地点的经纬度let geocoder = new AMap.Geocoder({radius: 1000,extensions: "all",});//根据坐标获取位置  将经纬度 转换后成 地址信息 放在 输入框展示geocoder.getAddress([e.lnglat.lng, e.lnglat.lat],function (status, result) {if (status === "complete" && result.info === "OK") {document.querySelector(".search-box-wrapper input").value =result.regeocode.formattedAddress;}});},},// el-amap定位当前位置  （初始化）plugin: [{enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 100, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：truebuttonPosition: "RB", //定位按钮停靠位置，默认：'LB'，左下角showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默 认：fextensions: "all",pName: "Geolocation",events: {init(o) {// o是高德地图定位插件实例//   console.log("0", o);o.getCurrentPosition((status, result) => {// console.log("初始化当前位置", result);if (result && result.position) {// 设置经度self.lng = result.position.lng;// 设置纬度self.lat = result.position.lat;//如果 Nowlnglat 经纬度有值 回显或刷新页面： 显示初始化的定位  或  点击后的定位if(self.Nowlnglat[0] != null && self.Nowlnglat[1] != null){console.log('Nowlnglat____',self.Nowlnglat)let  Clnglat =self.Nowlnglatself.center = Clnglat;self.marker.position = Clnglat;let geocoder = new AMap.Geocoder({radius: 1000,extensions: "all",});//根据坐标获取位置  将经纬度 转换后成 地址信息 放在 输入框展示geocoder.getAddress(Clnglat,function (status, result) {if (status === "complete" && result.info === "OK") {document.querySelector(".search-box-wrapper input").value =result.regeocode.formattedAddress;}});// alert(123)} else {// 设置坐标中心点self.center = [self.lng, self.lat];self.marker.position = [self.lng, self.lat];//存储  初始化定位sessionStorage.setItem("maplng1", self.lng);sessionStorage.setItem("maplat1", self.lat);console.log("初始", sessionStorage.getItem("maplng1"));console.log(sessionStorage.getItem("maplat1"));document.querySelector(".search-box-wrapper input").value =result.formattedAddress;}self.loaded = true;self.$nextTick(); //页面渲染好后}});},},},],};},methods: {//搜索地址 查询结果onSearchResult(pois) {console.log(pois);this.marker.position = [pois[0].lng, pois[0].lat];this.center = [pois[0].lng, pois[0].lat];sessionStorage.setItem("maplng", pois[0].lng);sessionStorage.setItem("maplat", pois[0].lat);},},
};
</script>

css：

<style scoped lang="scss">
.map_address {height: 50vh;width: 100vh;// background: red;.amap-wrapper {// display: flex;// flex-direction: column;height: 100%;width: 100%;.search-box {width: 100%;// transform: translateY(-20px);border: 1px solid #d9d9d9;/deep/.search-btn {background: #46a6ff;width: 15%;border-radius: 5px;}}}
}
</style>

 2.  父页面 （表单页）

html： 引入子组件map  

<el-form-item label="地理位置:" ><address-map :Nowlnglat="Nowlnglat" ></address-map></el-form-item>

 js：Nowlnglat（经纬度）传给子组件  回显

<script>import addressMap from '@/views/register/components/map.vue' //引入组件export default {name: "module2",data() {return {Nowlnglat:[],};},components:{addressMap},mounted() {//判断获取到的经纬度 初始化或点击后 传给子组件map 回显if(sessionStorage.getItem('maplng')&&sessionStorage.getItem('maplat')){this.formData.longitude= sessionStorage.getItem('maplng')this.formData.latitude= sessionStorage.getItem('maplat')this.Nowlnglat=[this.formData.longitude,this.formData.latitude]// console.log('点击后--',this.Nowlnglat)}else{this.formData.longitude= sessionStorage.getItem('maplng1')this.formData.latitude= sessionStorage.getItem('maplat1')this.Nowlnglat=[this.formData.longitude,this.formData.latitude]// console.log('初始化--',this.Nowlnglat)}},methods: {}
};
</script>

这篇关于vue-amap 实现高德地图定位 + 搜索 +回显的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---