javascript - Using Baidu map in vue prompts that it cannot be parsed

Question

I use vue-cli to build an application and reference Baidu Map's script in index.html, [&lt;script type="text/javascript" src="http://api.map.baidu.com/api?...I ak"&gt;&lt;/script&gt;] Then call Baidu in the mounted function of app.vue

怪我咯 · Answer

https://www.talkingcoder.com/... Use asynchronous loading of maps

曾经蜡笔没有小新 · Answer

Global references need to be added in webpack.base.conf.js

webpackConfig

externals: {
   "BMap": "BMap" 
  },

This is loaded globally, so it will be loaded regardless of whether you use it or not.

We started with a global approach, and later adopted asynchronous loading considering user experience.

You can use the writing method above, because nodejs is not sophisticated, so I used the callback method

 "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";

You can see that there is a callback at the end of the Baidu js link, which will call a function under the window. Then we can register a function and initialize it directly

mounted(){
    window['init']=function(){
    //百度地图加载完成会调用这里，这里就可以正常初始化了
    }
}

If you use the above method, only one Baidu map can be initialized for each page. If there are multiple maps, they need to be locked.

When initializing the first map, since the component needs to be loaded asynchronously, it is locked at this time. The second and third maps do not need to load the component asynchronously. They only need to register the callback function and store the function name in a cookie or local Storage etc. Then when the map is loaded, the first registered callback function will be executed, and then the first one can initialize the map normally. At the same time, the notification reads the other two function names from the storage and calls them to complete the initialization, so that the same page can be initialized multiple times at the same time