How to implement Baidu map display in vuejs project

Implementation method: 1. Apply for a secret key in "Baidu Map Development Platform"; 2. Use script tags in "index.html" to introduce map links; 3. Put in "APP.vue" Relevant js code implements Baidu map.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

vue uses Baidu map in the project

The first step is to go to the Baidu map development platform http://lbsyun.baidu.com/ Apply for a secret key.

The second step is introduced in the project, as follows

In which index.html stores the map link, the code is as follows

Then implement it in APP.vue, the code is as follows

<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>

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to implement Baidu map display in vuejs project. For more information, please follow other related articles on the PHP Chinese website!