vue 项目使用通过经纬度显示地图

 传入经纬度 和缩放值

<template>
  <baidu-map
      class="bm-view"
      ak='wV9oGUUNbPnvGpNVruQt5KbccvWjTXIo'
      :scroll-wheel-zoom="true"
      :center="center"
      :zoom="zoom"
      @ready="handler"
  >
    <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: icon, size: {width: 30, height: 30}}"></bm-marker>
  </baidu-map>
</template>

<script>
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import {BaiduMap, BmMarker} from 'vue-baidu-map'
export default {
  name: 'Map',
  components: { BaiduMap, BmMarker },
  props: {
    lng: {default: ''},
    lat: {default: ''},
    zoom:{type:Number ,default: 16}
  },
  data () {
    return {
      icon: require('./images/地图定位.png'),
      center: {lng: 0, lat: 0},}
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      let mapStyle= {style:'midnight'}
      map.setMapStyle(mapStyle);

      this.center.lng = this.lng
      this.center.lat = this.lat
      this.zoom = this.zoom || 16
    }
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 100%;
  /*height: 300px;*/
  /deep/ .BMap_cpyCtrl{ display: none !important;}
}

</style>