Vue cli3 + vue-baidu-map 百度地图学习笔记

1、创建项目
npm create bai-du-map

2、启动项目
cd bai-du-map
npm run serve

3、安装百度地图
npm install vue-baidu-map --save
全局注册

main.js
	import Vue from 'vue'
	import BaiduMap from 'vue-baidu-map'
	Vue.use(BaiduMap, {
	  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
	  ak: 'YOUR_APP_KEY' // 这里填写申请的秘钥
	})

4、创建views->BaiDuMap.vue
局部注册

<template>
  <div class="map-warp">
    <baidu-map
      class="map"
      ak="ufeGpwfCdo4WLZKtSVoOQXfMwykKkyov"
      :center="center"
      :zoom="zoom"
      @ready="handler"
    ></baidu-map>
  </div>
</template>

<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map'
  
  export default {
    name: "BaiDuMap",
    components: {
      BaiduMap
    },
    data() {
      return {
        center: { lng: 0, lat: 0 }, // //经纬度
        zoom: 15 // //地图展示级别
      }
    },
    methods: {
      handler ({BMap, map}) {
        console.log(BMap, map)
        this.center.lng = 118.83500
        this.center.lat = 32.0835479
      }
    },
  }
</script>

<style>
  .map {
    width: 100%;
    height: 400px;
  }
</style>

git下载包

vue-baidu-map官方文档