[JavaScript知识库]vue 接入vue-baidu-map

踩坑? 赋值要注意不然容易报错

封一个百度地图组件

<template>
  <section class="map-area">
    <!-- 地图 -->
    <baidu-map
      ak="c3mhYQRUlBLoaeCNmpSWIzB9ePGQusnG"
      class="bm-view"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @ready="handler"
    >
      <bm-marker
        :position="{ lng: lng, lat: lat }"
        animation="BMAP_ANIMATION_BOUNCE"
        :icon="{
          url: '	https://api.map.baidu.com/images/marker_red_sprite.png',
          size: { width: 300, height: 157 },
        }"
      >
      </bm-marker>
    </baidu-map>
  </section>
</template>


<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";

export default {
  name: "BMap",
  components: { BaiduMap, BmMarker },
  props: ["point"],
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      lng: 116.404,
      lat: 39.915,
      zoom: 3,
    };
  },
  created() {
    console.log("center", this.center);

    // console.log("lng", this.lng);
    // console.log("lat", this.lat);
  },
  watch: {},
  methods: {
    handler({ BMap, map }) {
      this.map = map;
      this.BMap = BMap;
      map.disableDragging(); //禁止拖拽
      map.disableScrollWheelZoom(); //禁止缩放
      let _this = this;
      _this.lng = _this.center.lng = this.point.lng;
      _this.lat = _this.center.lat = this.point.lat;

      _this.zoom = 15;
    },
  },
};
</script>

<style scoped lang='scss'>
.bm-view {
  width: 100%;
  height: 535px;
}
</style>

页面里引入组件

    <BMap :point="point" />

异步请求之后赋值经纬度

  getMerConfig: function () {
      this.$axios.get("/api/pc/mer_config/" + this.id).then((res) => {
        let _this = this;
        _this.point.lng = res.data.about_us.baidu_address[0];
        _this.point.lat = res.data.about_us.baidu_address[1];
        // this.point.lng = 120.52;
        // this.point.lat = 30.4;
        console.log("point", this.point);
      });
    },