在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)

首先
注册登陆高德地图 https://lbs.amap.com/

划过头像里面有个应用管理点开
进入到应用管理打开我的应用

选择创建应用

然后按照要求填写内容，切记一定要选择web端(JS API),填写完后提交当前应用。

完了这么多只是为了获得key

然后
打开项目
npm install vue-amap --save
安装地图依赖

打开项目中的mian.js文件
将下面复制进去，并替换为你自己应用的key

import aMap from 'vue-amap'   // 这个引入的最好放在引入的vue上面
Vue.use(aMap)
aMap.initAMapApiLoader({
  key: '*******************************',  // 你的key
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMap.Geocoder', 'AMap.AMapManager', 'AMap.Marker'],//应用功能项
  v: '1.4.4', //版本
  uiVersion: '1.0' //ui版本
})

新建一个demo组件

用户可以直接获取当前位置信息以及通过搜索选中地址,点击地图,获取经纬度与地址信息,点击确认按钮可操作传递你的经纬度与地址(包括放大缩小卫星路况路网) 对了 里面有element-ui组件 可以配置一下也可自行改变(样式依旧自己写)