javascript - L'utilisation de la carte Baidu dans Vue indique qu'elle ne peut pas être analysée

Question

J'utilise vue-cli pour créer une application et référencer le script de Baidu Map dans index.html, [&lt;script type="text/javascript" src="http://api.map.baidu.com/api?... Je ak"&gt;&lt;/script&gt;] Puis appelez Baidu dans la fonction montée de app.vue

怪我咯 · Answer

https://www.talkingcoder.com/... Chargement des cartes de manière asynchrone

曾经蜡笔没有小新 · Answer

Des références globales doivent être ajoutées dans webpack.base.conf.js

webpackConfig

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

Ceci est chargé globalement, il sera donc chargé, que vous l'utilisiez ou non.

Nous avons commencé avec une approche globale, puis avons adopté le chargement asynchrone en tenant compte de l'expérience utilisateur.

Vous pouvez utiliser la méthode d'écriture ci-dessus, car nodejs n'est pas sophistiqué, j'utilise donc la méthode de rappel

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

Vous pouvez voir qu'il y a un rappel à la fin du lien Baidu js, qui appellera une fonction sous la fenêtre. Ensuite, nous pourrons enregistrer une fonction et l'initialiser directement

.

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

Si vous utilisez la méthode ci-dessus, une seule carte Baidu peut être initialisée pour chaque page. S'il existe plusieurs cartes, elles doivent être verrouillées.

Lors de l'initialisation de la première carte, puisque le composant doit être chargé de manière asynchrone, il est verrouillé à ce moment-là. Les deuxième et troisième cartes n'ont pas besoin de charger le composant de manière asynchrone. Elles doivent uniquement enregistrer la fonction de rappel et stocker le nom de la fonction. dans un cookie ou un stockage local, etc. Ensuite, lorsque la carte est chargée, la première fonction de rappel enregistrée sera exécutée, puis la première pourra initialiser la carte normalement. En même temps, la notification lit les deux autres noms de fonction du stockage et les appelle pour terminer l'initialisation, afin que la même page puisse être initialisée plusieurs fois en même temps