VUE 中引入百度地图(vue-Baidu-Map)

安装

$ npm install vue-baidu-map --save


全局注册

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


VUE 中引入百度地图(vue-Baidu-Map)_第1张图片

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


VUE 中引入百度地图(vue-Baidu-Map)_第2张图片

 

 

   

   

   

   

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;

  }

你可能感兴趣的:(VUE 中引入百度地图(vue-Baidu-Map))