高德地图的简单使用：点击标记获取经纬度和详细地址

准备工作

1. 先进入高德开发平台注册登录
2.进入地图 js Api 按照步骤申请key
3 使用npm安装依赖包 npm i @amap/amap-jsapi-loader --save
4. 高德api 都有说明 下面看下我实现的功能和代码

弹窗地图

1. 初始化地图加载地图将自动定位到您所在城市并显示，点击地图实现了打点获取经纬度和详情地址。

2.输入提示

使用了输入提示插件–在地图 js api 里服务模块里。
3.弹窗组件的全部代码

<template>
  <div class="app-container">
    <el-dialog
      title="打点"
      :append-to-body="true"
      :visible.sync="isShow"
      width="940px"
      top="15px"
      :close-on-click-modal="false"
      :before-close="beforeClose"
      :class="{textAlign:'center'}"
    >
      <div class="flex-ar mb15">
        <span>经度： {
   {
    form.lng }}</span><span> 纬度 {
   {
    form.lat }}</span><span> 地址 {
   {
    form.address }}</span>
      </div>
      <div id="container">

      </div>
      <div class="flex-bt" style="width: 400px;position: absolute;top:125px;left: 50px">
        <el-select v-model="address" clearable placeholder="请输入关键词" style="width: 400px;"
                   :remote-method="remoteMethod"
                   filterable
                   remote
                   @change="currentSelect"
                   class="one-text"
                   :loading="loading"