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 l'application

Citer le script de Baidu Map dans index.html,
【<script type="text/javascript" src="http://api.map.baidu.com/api?...My ak"> script>】

Appelez ensuite la démo de Baidu Map dans la fonction montée de app.vue
【

 // 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

】

Le message d'invite est le suivant

Ensuite, j'ai cité le script de la carte Baidu directement sur ma page sans utiliser vue-cli, et il s'est affiché correctement

Je ne sais pas si quelqu'un d'autre a rencontré ce problème

Answer 1

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

Answer 2

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