When the mounted map is initialized, BMap is not defined due to asynchronous issues, that is, the map has been initialized before Baidu’s api is fully introduced or loaded.
Solution:
1. Create a map.js
export function MP(ak) { return new Promise( function (resolve, reject) { window.init = function () { resolve(BMap) } var script = document.createElement('script' ) script.type ='text/javascript' script.src = `http: // api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init` script.onerror = reject document.head.appendChild(script) }) }
2. Reference in the .vue file
import {MP} from'../map.js'
3. Initialize in the mounted function
this .$nextTick(() => { const _this = this MP(_this.ak).then(BMap => { _this.initMap() }) })
Undefined BMap in map.js will report an error
Solution:
Make a global declaration in eslintrc.js
globals: { BMap: true }
That’s it~~
Read More:
- Eslint error “no undef” and eslint rule configuration in Vue cli3
- [Go] Solve the fatal error: concurrent map writes map is not concurrently safe
- VUE: Property or method “deleteFun“ is not defined on the instance but referenced during render. [How to Fix]
- The browser is compatible with IE11 “ReferenceError: ‘Promise’ is not defined” “ReferenceError: ‘Promise’ is not defined”
- [Solved] Eslint error: /xxx/components/xxx import should occur after import of /xxx/utils/xxx
- ＜script setup＞ Error: ‘defineProps‘ is not defined [How to Solve]
- Hash_map is deprecated and will be REMOVED. Please use unordered_map.
- Eslint Error:“Identifier xxx is not in camel case“
- [Solved] Vue Error: Failed to mount component: template or render function not defined
- [Solved] Vue cli version is @ Vue/cli 4.5.13, and sass is used to report an error
- [Solved] Eval Error: Uncaught ReferenceError: False is not defined
- [Solved] Parcel Service Error: regeneratorRuntime is not defined
- errorThrown:ReferenceError: data is not defined [How to Solve]
- IDEA reports an error. Error XXX reports an error. The class cannot be found
- [Solved] Vue3 Eslint Error: The template root requires exactly one element
- [Solved] Uncaught ReferenceError: is not defined at HTMLAnchorElement.onclick
- cloud.callFunction:fail Error:wx is not defined [How to Solve]
- [Solved] Uncaught ReferenceError: FileAsyncWriter is not defined
- IDEA reports an error Could not reserve enough space for xxxxKB object heap processing
- How to Solve jQuery error: Uncaught ReferenceError: $ is not defined