vue-cli を使用してアプリケーションを構築します
index.html の Baidu Map のスクリプトを引用します。
[<script type="text/javascript" src="http://api.map.baidu.com/api?...My ak "></script>]
次に、app.vue のマウントされた関数で Baidu Map のデモを呼び出します
[
]
プロンプト情報は次のとおりですスクリーンショット
そこで、vue-cliを使わずにBaidu Mapのスクリプトを自分のページに直接引用したところ、正しく表示されました
他にこの問題に遭遇した人がいるかどうかはわかりません
https://www.talkingcoder.com/... 用异步加载地图
全局引用需要在webpack.base.conf.js中添加
webpackConfig
这个是全局加载的,所以不管你是否用到都会加载进来。
我们开始采用了全局,后来考虑到用户体验采用了异步加载。
可以采用楼上的写法,因为nodejs不精,所以采用了回调的方式
可以看到百度js链接最后有callback,会调用window下的一个function,那么我们注册一个function就可以直接初始化了
如果用上面的方法,每个页面只可以初始化一个百度地图,如果多个需要进行加锁。
初始化第一个地图时,由于需要异步加载组件,在此时加锁,第二个第三个地图就不需要在异步加载组件,只需要注册回调函数,并将函数名字存入cookie或本地存储等。然后当地图加载完成会执行第一个注册的回调函数,那么此时第一个就可以正常初始化地图了。同时在通知从存储里读取另外两个的函数名并调用,完成初始化,这样就可以完成同一个页面同时初始化多个