安装

$ npm install vue-baidu-map --save

全局注册

在main.js 里面引入以下代码

在你新增的页面map.vue输入以下内容

  <div class="mapbox">

  <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:800px" @click="getClickInfo">

    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT">

    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT">

    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">

    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT">

export default {

name:'mapbox',

  data () {

return {

center: {lng:0, lat:0},

      zoom:13,

    }

},

  mounted:function () {

// this.enableScrollWheelZoom(true);

  },

  methods: {

handler ({BMap, map}) {

console.log(BMap, map)

this.center.lng =113.822348

      this.center.lat =22.635538

      this.zoom =this.zoom

    },

    getClickInfo (e) {

console.log(e.point.lng)

console.log(e.point.lat)

this.center.lng = e.point.lng

      this.center.lat = e.point.lat

    }

}

}

  .bm-view {

width:100%;

    height:300px;

  }