调整 map 模块, 使用时才加载

src/main.js

@@ -32,20 +32,6 @@ import 'mavon-editor/dist/css/index.css'
 import mavonEditor from 'mavon-editor'
 Vue.use(mavonEditor)
 
-import BaiduMap from 'vue-baidu-map'
-Vue.use(BaiduMap, {
-  ak: ''
-})
-
-import VueAMap from 'vue-amap'
-Vue.use(VueAMap)
-VueAMap.initAMapApiLoader({
-  key: 'your amap key',
-  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
-  // 默认高德 sdk 版本为 1.4.4
-  v: '1.4.15'
-})
-
 import VueClipboards from 'vue-clipboard2'
 Vue.use(VueClipboards)
 

src/views/home/AMap.vue

@@ -85,10 +85,17 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import VueAMap from 'vue-amap'
 import { lazyAMapApiLoaderInstance } from 'vue-amap'
+Vue.use(VueAMap)
+VueAMap.initAMapApiLoader({
+  key: 'your amap key',
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.15'
+})
 const amapManager = new VueAMap.AMapManager()
-
 import { getMapMarkers, getMarkerInfo, sendClickedLocation } from '@/api/map'
 
 export default {

src/views/home/AMap1.vue

@@ -1,42 +1,42 @@
 <template>
-  <div id="container"></div>
+  <div id="container" />
 </template>
 
 <script>
-import AMapLoader from '@amap/amap-jsapi-loader';
+import AMapLoader from '@amap/amap-jsapi-loader'
 import { shallowRef } from '@vue/reactivity'
 
 export default {
-  data () {
+  data() {
     return {
     }
   },
-  mounted(){
-    //DOM初始化完成进行地图初始化
-    this.initMap();
+  mounted() {
+    // DOM初始化完成进行地图初始化
+    this.initMap()
   },
-  setup(){
-    const map = shallowRef(null);
-    return{
-      map,
+  setup() {
+    const map = shallowRef(null)
+    return {
+      map
     }
   },
-  methods:{
-    initMap(){
+  methods: {
+    initMap() {
       AMapLoader.load({
-        key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
-        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      }).then((AMap)=>{
-        this.map = new AMap.Map("container",{  //设置地图容器id
-          viewMode:"3D",    //是否为3D地图模式
-          zoom:5,           //初始化地图级别
-          center:[105.602725,37.076636], //初始化地图中心点位置
-        });
-      }).catch(e=>{
-        console.log(e);
+        key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      }).then((AMap) => {
+        this.map = new AMap.Map('container', { // 设置地图容器id
+          viewMode: '3D', // 是否为3D地图模式
+          zoom: 5, // 初始化地图级别
+          center: [105.602725, 37.076636] // 初始化地图中心点位置
+        })
+      }).catch(e => {
+        console.log(e)
       })
-    },
+    }
   }
 }
 </script>

src/views/home/BdMap.vue

@@ -83,11 +83,16 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
 import BmScale from 'vue-baidu-map/components/controls/Scale'
 import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
 import BmMarker from 'vue-baidu-map/components/overlays/Marker'
 
+Vue.use(BaiduMap, {
+  ak: ''
+})
+
 import { getMapMarkers, getMarkerInfo, sendClickedLocation } from '@/api/map'
 
 export default {