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 实现高德地图定位 + 搜索 +回显相关推荐

vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
vue项目引入高德地图(定位、搜索、经纬度解析地址)
1.npm 安装 npm install vue-amap --save 2.main.js文件引入vue-amap import VueAMap from 'vue-amap' Vue.use(Vu ...
vue简单使用高德地图定位
1.获取key 我们需要到高德开放平台生成key 我这里选的是web端,提交后会生成一个key值 2.安装vue-amap npm install vue-amap --save 3.在项目main. ...
【VUE】vue-amap高德地图定位以及文本标注
vue-amap高德地图定位以及文本标注因要求需实现在地图的定位以及该定位的文本标注,所有我看了一下实现的方式有哪些.最后选择了用现成的 vue-amap高德组件去实现. 实现效果如图: 实现过程 ...
Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位
以上是最终效果图下面开始代码分享第一步在index,html引入高德地图模块 ` <script type="text/javascript ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)
首先注册登陆高德地图 https://lbs.amap.com/ 划过头像里面有个应用管理点开进入到应用管理打开我的应用选择创建应用然后按照要求填写内容,切记一定要选择web端(JS API) ...
高德地图怎么搜索marker_2018-07-06 高德地图搜索定位，滑动地图显示周边信息，根据地址搜经...
emmmm,效果图先行(搜索定位以及自由滑动地图展示周边位置信息,根据点击的位置获取经纬度) aa.gif 主要代码package com.dydd.wsp.dreamtree.ui.mapimpor ...

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

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

2.安装vue-amap 依赖

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

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

1. map子页面

2. 父页面（表单页）

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

最新文章

热门文章

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

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

2.安装vue-amap 依赖

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

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

1. map子页面

2. 父页面 （表单页）

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

最新文章

热门文章

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

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

2. 父页面（表单页）