vue接入高德地图获取经纬度

step1:高德地图开放平台，根据指引注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥;

step2:在html引入安全密钥（获取经纬度用，不然会报错）

按 NPM 方式安装使用 Loader  

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

新建地图组件 MapContainer.vue 并引入 amap-jsapi-loader 

import AMapLoader from '@amap/amap-jsapi-loader';

效果图:MapContainer组件只将经纬度和地址传到父组件

默认位置和经纬度：

点击地图上某个位置时：

地图组件代码：（只将经纬度传给父组件，因为form表单还有与地图无关的数据，所以没放到组件中）

 父组件：弹出框代码

记录一下，虽然简单，但是每次用到都要重新梳理流程，过程很烦躁。