怎么在vue中引用高德地图，可以查询，也可以获取坐标

//这是一个组件  需要在main.js中引用 

//步骤 1.

// 高德地图

import Ditu from "@/components/ditu"

2.全局组件挂载 Vue.component('Ditu', Ditu)

//以上就是使用步骤！

<template>

  <div class="map-search_wrapper" id="bmapSearch">

    <div class="header">

      需要查询的地址：

      <el-tooltip

        class="item"

        effect="dark"

        :content="textTip"

        placement="top"

        :value="isshowTip"

        manual

      >

        <el-input

          type="text"

          top="-140px"

          placeholder="请输入内容"

          @focus="editText"

          v-model="keyWord"

          @keyup.native.13="search"

          clearable

          class="search-input"

        >

        </el-input>

      </el-tooltip>

      <el-button type="primary" size="medium" @click="search">查询</el-button>

    </div>

    <div id="container" style="overflow: hidden"></div>

  </div>

</template>

<script>

import { asyncJS } from "@/utils/asyncJs.js";

//这个文件是一个工具js（

export const asyncJS = (src) => {

    var jsapi = document.createElement('script');

    jsapi.charset = 'utf-8';

    jsapi.src = src;

    document.head.appendChild(jsapi);

};

）

export default {

  name: "ditu",

  data() {

    return {

      keyWord: "",

      longAndLat: "",

      map: null,

      mapMark: null,

      localSearch: "",

      textTip: "",

      isshowTip: false,

      key: null,

    };

  },

  mounted() {

    this.keyWord = this.bmapSearMsg;

    this.key = this.keys;

    window.onLoadMap = () => {

      this.ready();

    };

    // key 值需要去高德地图去申请才可以

    asyncJS(

      // "https://webapi.amap.com/maps?v=1.4.15&key=6c2817bc510e8fa670df6d6e465370a4&callback=onLoadMap"

      `https://webapi.amap.com/maps?v=1.4.15&key=${this.key}&callback=onLoadMap`

    );

  },

  created() {},

  beforeDestroy() {},

  props: {

    bmapSearMsg: [String, Object, Array],

    keys: [String, Object, Array],

  },

  methods: {

    closeBmap() {

      this.$emit("closeBmap");

    },

    comfirmBmap() {

      this.$emit("comfirmBmap", this.longAndLat);

    },

    ready() {

      this.map = new window.AMap.Map("container", {

        resizeEnable: true,

      });

      let _this = this;

      // 为地图注册click事件获取鼠标点击出的经纬度坐标

      this.map.on("click", function (e) {

        let lng = e.lnglat.getLng();

        let lat = e.lnglat.getLat();

        _this.longAndLat = lng + "," + lat;

        // 打新的标记

        _this.addMarker(lng, lat);

        _this.$emit("input", _this.longAndLat);

      });

    },

    search() {

      let _this = this;

      window._AMapSecurityConfig = {

        securityJsCode: "5d3da1aed5214e82cbb9fed58221836d",

      };

      window.AMap.plugin("AMap.PlaceSearch", function () {

        var autoOptions = {

          city: "全国",

          map: _this.map, // 展现结果的地图实例

          pageSize: 1, // 单页显示结果条数

          pageIndex: 1, // 页码

          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围

        };

        var placeSearch = new window.AMap.PlaceSearch(autoOptions);

        placeSearch.search(_this.keyWord, function (status, result) {

          // console.log(result);

          // 搜索成功时，result即是对应的匹配数据

          if (status == "complete") {

            if (result.poiList.pois.length > 0) {

              let lng = result.poiList.pois[0].location.lng;

              let lat = result.poiList.pois[0].location.lat;

              _this.longAndLat = lng + "," + lat;

              _this.addMarker(lng, lat);

              _this.$emit("input", _this.longAndLat);

            } else {

              _this.$message({

                message: "没有查询到对应的地址",

                type: "warning",

              });

            }

          } else if (status == "no_data") {

            _this.$message({

              message: "没有查询到对应的地址",

              type: "warning",

            });

          }

        });

      });

    },

    // 清除 marker

    clearMarker() {

      if (this.mapMark) {

        this.mapMark.setMap(null);

        this.mapMark = null;

      }

    },

    // 实例化点标记

    addMarker(lng, lat) {

      // 先清除原来的标记

      // this.clearMarker();

      // 清除所有标记

      this.map.clearMap();

      let _this = this;

      this.mapMark = new window.AMap.Marker({

        position: [lng, lat],

        map: _this.map,

      });

      this.mapMark.setMap(this.map);

    },

    editText() {

      this.isshowTip = false;

    },

  },

};

</script>

<style >

.map-search_wrapper {

  margin-top: 200px;

}

.el-input__inner {

  border: 1px solid #96a0a9;

}

.map-search_wrapper {

  position: absolute;

  top: -140px;

  left: 0;

  z-index: 9999;

  border-radius: 5px;

  width: 100%;

  min-height: 60%;

  min-width: 950px;

  overflow-x: auto;

  padding: 65px 30px 20px 30px;

  background: #fff;

  color: #000000;

}

.search-input {

  display: inline-block;

  width: 28%;

}

.header {

  width: 100%;

  height: 60px;

  /* padding-left: 30px; */

  position: absolute;

  top: 0;

  left: -84px;

  line-height: 4.5;

  font-size: 14px;

  color: #fff;

}

#container {

  width: 100%;

  height: 50vh;

  background-color: #ffffff;

}

</style>