Comment implémenter l'affichage de la carte Baidu dans le projet vuejs

Méthode de mise en œuvre : 1. Demandez une clé secrète dans « Baidu Map Development Platform » ; 2. Utilisez des balises de script dans « index.html » pour introduire les liens de carte ; 3. Mettez le code js pertinent dans « APP.vue » pour implémenter ; Carte Baidu.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

vue utilise Baidu Maps dans le projet

La première étape consiste à accéder à la plateforme de développement de cartes Baidu http://lbsyun.baidu.com/ pour demander une clé secrète.

La deuxième étape est introduite dans le projet, comme suit

où index.html stocke le lien de la carte, le code est le suivant

Ensuite, il est implémenté dans APP.vue, le code est le suivant suit

<template>
 <div id="app">
  <div id="allmap" ref="allmap"></div>
  <router-view></router-view>
 </div>
</template>
  
<script>
export default {
 name: 'App',
 methods:{
  map(){
   let map =new BMap.Map(this.$refs.allmap); // 创建Map实例
   map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别
   map.addControl(new BMap.MapTypeControl({//添加地图类型控件
    mapTypes:[
     BMAP_NORMAL_MAP,
     BMAP_HYBRID_MAP
    ]}));
   map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的
   map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  }
  
 },
 mounted(){
  this.map()
  
 }
}
</script>
  
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
#allmap{
 height: 500px;
 overflow: hidden;
  
}
</style>

Recommandations associées : " Tutoriel vue.js》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!