vue引入高德地图，逆地址解析，点标记

##再index.html中引入

  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值&plugin=AMap.MouseTool&plugin=AMap.Geocoder""></script> 

##vue.config.js文件内：

module.exports = {
  configureWebpack: (config) => {
    // 优化，采用外部cdn
    config.externals = {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      moment: 'moment',
      **'AMap':'AMap'**
    }
  },
}

##新建map.vue

<template>
  <div class="content">
    <div id="container" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import { NavBar } from "_components";
import { interfaces } from "_api/common.js";
import { postData } from "_api/index.js";

export default {
  
  data() {
    return {
      point2: [],
      address: "",
    };
  },

  mounted() {
    this.initMap();
    this.draw("marker");
  },
  methods: {
    draw(type) {
      let that = this;
      var map = new AMap.Map("container", {
        zoom: 14,
      });

      var mouseTool = new AMap.MouseTool(map);
      var overlays = [];
      mouseTool.on("draw", function (e) {
        console.log(e.obj.w.position.lng);
        console.log(e.obj.w.position.lat);
        that.point2 = [e.obj.w.position.lng, e.obj.w.position.lat];
        map.remove(overlays);
        overlays.push(e.obj);
        map.plugin("AMap.Geocoder", function () {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: "010",
          });

          var lnglat = [e.obj.w.position.lng, e.obj.w.position.lat];

          geocoder.getAddress(lnglat, function (status, result) {
            if (status === "complete" && result.info === "OK") {
              // result为对应的地理位置详细信息
              console.log(result.regeocode.formattedAddress);
              that.address = result.regeocode.formattedAddress;
            }
          });
        });
      });

      switch (type) {
        case "marker": {
          mouseTool.marker({
            //同Marker的Option设置
          });
          break;
        }
      }
    },

    initMap(map) {
      var map = new AMap.Map("container", {
        zoomEnable: true, //是否禁止缩放
        zoom: 12, //缩放比例
        dragEnable: true, //禁止拖动
        cursor: "hand", // 鼠标在地图上的表现形式，小手
      });
      // 初始化工具条
      map.plugin(["AMap.ToolBar"], function () {
        map.addControl(new AMap.ToolBar());
      });
    },
  },
};
</script>
<style scoped>
html,
body,
#container {
  height: 100%;
  width: 100%;
  /* height: 400px; */
  margin-top: 0px;
  padding-bottom: 0;
}
.content {
  height: 100%;
  width: 100vh;
  overflow: hidden;
}
</style>