vue将BaiduMap引入（组件引入），显示位置信息

<template>
  <div class="mapWin">
      <!-- ak密钥自己申请 -->
    <baidu-map
      @ready="handler"
      class="bm-view"
      ak="XXXXXXXXXXX"
      :center="center"
      :zoom="zoom"
    >
      <!-- 目标位置提示点 -->
      <bm-marker
        :position="{ lng: 116.404, lat: 39.915 }"
        :dragging="true"
        @click="infoWindowOpen"
        animation="BMAP_ANIMATION_BOUNCE"
      >
        <bm-info-window
          :show="show"
          @close="infoWindowClose"
          @open="infoWindowOpen"
          >我爱北京天安门</bm-info-window
        >
      </bm-marker>
      <!-- 缩放调节大小 -->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!-- 比例尺 -->
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
    </baidu-map>
  </div>
</template>
<script>
import { BaiduMap, BmMarker, BmInfoWindow, BmNavigation,BmScale } from "vue-baidu-map";

export default {
  name: "mapPage",
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      BMap: null,
      map: null,
      show: false,
    };
  },
  components: {
    BaiduMap,
    BmMarker,
    // BmScale,
    // BmLabel,
    BmInfoWindow,
    BmNavigation,
    BmScale
  },
  methods: {
    handler: function ({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
    },
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },
  },
};
</script>
<style>
.mapWin {
  width: 100%;
  height: 300px;
}
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

效果如下：

注意：如果只引用部分BaiduMap，API写的是引用vue-baidu-map的“map/Map.vue"，但是引用maker，label等就不能这样写，他们用的是overlays文件下的内容，所以可以直接像上述写法一样引入。

关于BMap的undefined问题也是注意使用handler方法将对象获取，如果还要实现定位可以使用GeoLocation等方法。关于组件不存在，用到哪个就import哪个，在component中声明。

红色图标样式有动态和静态，动态的图片位置上下移动，如果要设置点击事件弹出infoWindow需要进一步处理。静态的可以获取到点击的位置触发infoWindow弹窗。

传送JavaScript的百度API手册：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage