vue.js 引入 百度地图 api

可参考它们在github上面的文档进行使用。这里只介绍下vue的。
https://github.com/Dafrok/vue

安装

npm i vue-baidu-map --save

初始化

main.js 引入

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '这个地方是官方提供的ak密钥'    
})

使用

 <template>
  <div>
    <el-card class="card-back-color card1">
      <div class="baidu-title">
        <h4>百度地图API</h4>
      </div>
      <baidu-map :center="center" :zoom="zoom" @ready="handler" class="map">
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      </baidu-map>
    </el-card>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        center: {lng: 0, lat: 0},
        zoom: 3
        }
    },

    mounted(){
      this.addPoints()
    },
    methods:{
      handler ({BMap, map}) {
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        console.log(BMap, map)
        this.center.lng = 121.62
        this.center.lat = 38.92
        this.zoom = 11.5
      }
      }
    }
</script>
<style>
  /* The container of BaiduMap must be set width & height. */
  .map {
    width: 2080px;
    height: 900px;
  }

  .card1 {
    border-radius: 3px;
  }

  .card-back-color {
    background-color: rgba(22, 29, 73, 0.9);
    border: 0px solid #EBEEF5;
  }
  .baidu-title{
    color: white;
    font-size: 20px;
  }
</style>

成果展现：

附VUE BAIDU MAP 文档：https://dafrok.github.io/vue-baidu-map/#/

---

能力不足水平有限
有问题别说脏话
来学习交流就好
有问必答
email:1848199654@qq.com

---