Vue Baidu Map使用过程中问题

1、安装vue-baidu-map

npm install vue-baidu-map --save

2、局部引入组件 -- 当前项目只有这个页面用到

// index.vue
import BaiduMap from 'vue-baidu-map/components/map/Map' // 引入地图组件
import BmMarker from 'vue-baidu-map/components/overlays/Marker' // 引入标记点

3、页面代码

<template>
  <div class="baiduMapWrap" v-transfer-dom>
    <x-dialog v-model="visible" class="dialog" hide-on-blur>
      <baidu-map v-if="visible" class="bm-view"
        :center="center"
        :zoom="zoom"
        @ready="handler"
        :ak="ak">
        <bm-marker :position="center" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
        </bm-marker>
      </baidu-map>
    </x-dialog>
  </div>
</template>
import BaiduMap from 'vue-baidu-map/components/map/Map'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import { XDialog, TransferDomDirective as TransferDom } from 'vux'
export default {
  components: {
    BaiduMap,
    BmMarker,
    XDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    center: {
      type: Object,
      default: () => {
        return {
          lng: 116.404,
          lat: 39.915
        }
      }
    },
    zoom: {
      type: Number,
      default: 15
    }
  },
}
</script>
<style lang="less" scoped>
.baiduMapWrap{
  .bm-view {
    width: 100%; 
    height: 330px; // 一定要给定容器的高度，否则不可见
  }
}
</style>

• 注意的点： 1、ak：要在百度地图开发者平台申请密钥（ lbsyun.baidu.com/apiconsole/… ）
  2、一定要给容器设置高度，否则页面上不显示地图
  （如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。）
  3、局部引入的时候组件都在vue-baidu-map/components文件夹里
  通过 import xxx from 'vue-baidu-map/components/xxx/xxx'
  4、在弹窗里使用百度地图的时候，会出现中心位偏移的问题
  在<baidu-map></baidu-map>加上v-if="visible"解决问题