混合使用（vue-amap与原生API混合使用）

混合使用（vue-amap与原生API混合使用） 只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成 实例化操作不是加载地图，简单来说就是用一些属性去实例化地图的这个类 new xxx() 代表的就是实例化xxx🛸。这样就不需要在使用el-amap中的center属性和zoom属性了🎨，因为已经通过原生的方式进行实例化了👜。

import { lazyAMapApiLoaderInstance } from 'vue-amap';
lazyAMapApiLoaderInstance.load().then(() => {
  // your code ...
  this.map = new AMap.Map('amapContainer', {
    center: new AMap.LngLat(121.59996, 31.197646)
  });
}); 

• 在vue-amap中引入高德原生SDK只需在el-amap上绑定amap-manager就可以拿到高德原生AMap.Map实例文档地址

<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :center="center" :amap-manager="amapManager" :zoom="zoom"
      class="amap-demo">
    </el-amap>

    <div class="toolbar">
      <button @click="add()">add marker</button>
    </div>
  </div>
</template>

  <style> .amap-demo {
  height: 300px !important;
} </style>

<script> // NPM 方式
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();
export default {
  data: function () {
    return {
      zoom: 12,
      center: [121.59996, 31.197646],
      amapManager,
    };
  },

  methods: {
    add() {
      let o = amapManager.getMap();
      let marker = new AMap.Marker({
        position: [121.59996, 31.177646]
      });
      marker.setMap(o);
    }
  }
} 
</script> 

总结 网上针对高德地图的调用方案也有很多，我也是刚刚接触，文中的观点都是自身的看法，最后说一下自身对选型的判断🎑。

如果是大屏类的项目，没有过多的交互只是简单扎点，展示建议使用vue-amap🤙🤙🤙。 如果是已地图为中心的项目，包括人员路线，轨迹等等比较复杂的交互建议使用原生🤙🤙🤙。