Maison > Article > interface Web > Comment implémenter l'affichage de la carte Baidu dans le projet vuejs
Comment implémenter l'affichage de la carte Baidu dans le projet vuejs
- 青灯夜游original
- 2021-09-24 16:42:422506parcourir
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!