vue使用vue-amap兼容高德地图

安装

yarn add vue-amap --save npm install vue-amap --save

main.js配置

import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui";
import "./registerServiceWorker";
import "element-ui/lib/theme-chalk/index.css";
import router from "./router";
import store from "./store";
import "./globle.css";
import VueAMap from "vue-amap";

Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: "key",
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor",
    "AMap.MouseTool",
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: "1.4.4",
});
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

组件使用

<div class="amap-wrapper">
      <el-amap
        class="amap-box"
        vid="amap-vue"
        :center="center"
      >
        <!-- <el-amap-marker :position="center"></el-amap-marker> -->
      </el-amap>
    </div>
    export default {
  data() {
    let _self = this;
    return {
      map: null,
      mouseTool: null,
      center: [116.39, 39.9],
    };
  },
  }

兼容高德地图

events的init，地图加载完成后，通过lazyAMapApiLoaderInstance兼容

events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            _self.initMap();
          });
        },
      },

//获取地图的实例 let map = amapManager.getMap(); //保存地图实例 this.map = map;

<template>
  <div>
    基础地图
    <el-button @click="drawPolygon">开始绘制</el-button>
    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        vid="amap-vue"
        :center="center"
        :events="events"
        :amap-manager="amapManager"
      >
        <!-- <el-amap-marker :position="center"></el-amap-marker> -->
      </el-amap>
    </div>
  </div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
import VueAMap from "vue-amap";
let amapManager = new AMapManager();
export default {
  data() {
    let _self = this;
    return {
      map: null,
      mouseTool: null,
      center: [116.39, 39.9],
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            // your code ...
            // this.map = new AMap.Map("amapContainer", {
            //   center: new AMap.LngLat(121.59996, 31.197646),
            // });
            _self.initMap();
          });
        },
      },
      amapManager: amapManager,
    };
  },
  methods: {
    //初始化地图
    initMap() {
      //获取地图的实例
      let map = amapManager.getMap();
      //保存地图实例
      this.map = map;
      //   创建一个 Marker 实例：
      //   var marker = new AMap.Marker({
      //     position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //     title: "北京",
      //   });

      //   //   将创建的点标记添加到已有的地图实例：
      //   this.map.add(marker);
      console.log("AMap", AMap);
      console.log("AMap", AMap.MouseTool);
    },
    draw() {
      mouseTool.rectangle({
        fillColor: "#00b0ff",
        strokeColor: "#80d8ff",
        //同Polygon的Option设置
      });
    },
    // 绘制多边形
    drawPolygon() {
      console.log("开始");
      var mouseTool = new AMap.MouseTool(this.map);
      //监听draw事件可获取画好的覆盖物
      var overlays = [];
      mouseTool.on("draw", function (e) {
        console.log(e);
        overlays.push(e.obj);
      });
      mouseTool.rectangle({
        fillColor: "#00b0ff",
        strokeColor: "#80d8ff",
        //同Polygon的Option设置
      });
      this.mouseTool = mouseTool;
    },
  },
};
</script>
<style scoped>
.amap-wrapper {
  /* width: 500px; */
  width: 100%;
  height: 500px;
}
</style>