vue项目中使用高的地图

第一步：安装依赖

npm install vue-amap --save

第二步：在main.js中

import AMap from "vue-amap";
Vue.use(AMap);
AMap.initAMapApiLoader({
  key: "开发者申请的key", 
  plugin: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType"],
  uiVersion: "1.0.11", // ui库版本，不配置不加载,
  v: "1.4.4"
});

第三步：在demo.vue中使用

                <el-amap 
                  ref="map" 
                  vid="amapDemo" 
                  :amap-manager="amapManager" 
                  :center="center" 
                  :zoom="zoom" 
                  :plugin="plugin" 
                  :events="events" 
                  class="amap-demo">
                </el-amap>

import AMap from "vue-amap";
import { AMapManager } from "vue-amap";
let amapManager = new AMap.AMapManager();

data(){
    return{
      amapManager,
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: o => {
          console.log(o.getCenter());
          // console.log(this.$refs.map.$$getInstance());
          o.getCity(result => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: e => {
          console.log("map clicked");
        }
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            }
          }
        }
      ],
    }
}

⚠️注意：

附：vue-amap官网