vuejs項目如何實現百度地圖顯示

這篇文章給大家介紹vuejs項目如何實現百度地圖顯示，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

實現方法：1、在“百度地圖開發平臺”中申請秘鑰；2、在“index.html”中使用script標簽引入地圖鏈接；3、在“APP.vue”中放入相關js代碼實現百度地圖。

本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vue在項目中使用百度地圖

第一步，去百度地圖開發平臺http://lbsyun.baidu.com/ 申請秘鑰。

第二步在項目中引入，具體如下

其中index.html存放地圖鏈接，代碼如下

然后在APP.vue里面實現，代碼如下

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

關于vuejs項目如何實現百度地圖顯示就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。