其他问题 | 加载Vue-Amap，无法正常使用

提问|加载Vue-Amap，无法正常使用,错误信息如下

>>>>>> 错误信息 >>>>>>
index.js?ac5b:21 beforeCreate hook
util.log.js?3dbf:39 >>>>>> Vue 实例 >>>>>>
index.js?ac5b:23 VueComponent {_uid: 109, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
util.log.js?3dbf:39 >>>>>> Error >>>>>>
index.js?ac5b:25 TypeError: Cannot read properties of null (reading 'load')
    at VueComponent.beforeCreate (index.js?8f9b:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5004)
    at new VueComponent (vue.runtime.esm.js?2b0e:5154)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
    at init (vue.runtime.esm.js?2b0e:3114)
    at createComponent (vue.runtime.esm.js?2b0e:5978)
    at createElm (vue.runtime.esm.js?2b0e:5925)
    at createChildren (vue.runtime.esm.js?2b0e:6053)
util.log.js?3dbf:27  D2Admin  ErrorHandler 
util.log.js?3dbf:39 >>>>>> 错误信息 >>>>>>
index.js?ac5b:21 mounted hook
util.log.js?3dbf:39 >>>>>> Vue 实例 >>>>>>
index.js?ac5b:23 VueComponent {_uid: 109, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
util.log.js?3dbf:39 >>>>>> Error >>>>>>
index.js?ac5b:25 TypeError: Cannot read properties of undefined (reading 'then')
    at VueComponent.createMap (index.js?8f9b:1)
    at VueComponent.mounted (index.js?8f9b:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
content.js:1 localhost <<<<<

使用步骤：

npm install -S vue-amap

在main.js 注册地图组件


// Vue
import Vue from 'vue'
import i18n from './i18n'
import App from './App'
// 核心插件
import d2Admin from '@/plugin/d2admin'
// store
import store from '@/store/index'

// 菜单和路由设置 import router from './router' import { menuHeader, menuAside } from '@/menu' import { frameInRoutes } from '@/router/routes'

import VueAMap from 'vue-amap'; //引入AMap-vue Vue.use(VueAMap); VueAMap.initAMapApiLoader = { key: '', // key我复制过来的时候删了项目中存在 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], };

// 核心插件 Vue.use(d2Admin)

new Vue({ router, store, i18n, render: h => h(App), created() { // 处理路由得到每一级的路由设置 this.$store.commit('d2admin/page/init', frameInRoutes) // 设置顶栏菜单 this.$store.commit('d2admin/menu/headerSet', menuHeader) // 设置侧边栏菜单 this.$store.commit('d2admin/menu/asideSet', menuAside) // 初始化菜单搜索功能 this.$store.commit('d2admin/search/init', menuHeader) }, mounted() { // 展示系统信息 this.$store.commit('d2admin/releases/versionShow') // 用户登录后从数据库加载一系列的设置 this.$store.dispatch('d2admin/account/load') // 获取并记录用户 UA this.$store.commit('d2admin/ua/get') // 初始化全屏监听 this.$store.dispatch('d2admin/fullscreen/listen') } }).$mount('#app')

data: function () { // for sidebar left return { meta: { dataSourceList: [ { value: "static", label: "静态", }, ], dataIdList: [ { value: "static", label: "静态无须指定", }, ], }, amapContext: { // 地图参数 map: { center: [116.473778, 39.990661], position: [116.473778, 39.990661], zoom: 14, pitch: 0, rotation: 15, polyLine: [], },

.......

d2-projects / d2-admin-start-kit

其他问题 | 加载Vue-Amap，无法正常使用 #71

提问|加载Vue-Amap，无法正常使用,错误信息如下