地图组件制作

<template>
  <div id="allMap">
    <div id="bookingMap"></div>
  </div>
</template>
<script>
let map;
export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  beforeDestroy() {
    map = null;
  },
  methods: {
    initMap() {
      //实例化地图
      map = new BMap.Map("bookingMap");
      //设置地图中心点坐标，比例大小
      var point = new BMap.Point(-113.492951, 53.541479);
      map.centerAndZoom(point, 19);
      //启用滚轮放大缩小，默认禁用
      map.enableScrollWheelZoom();
      //启用地图拖拽事件，默认启用
      map.enableInertialDragging();
      //启用地图缩放，默认禁用
      map.enableContinuousZoom();
      //默认手型改为十字星
      map.setDefaultCursor("crosshair");
      // 用经纬度设置地图中心点(反显示)
      map.clearOverlays();
      let geoc = new BMap.Geocoder();
      //根据经纬度获得详细地址
      geoc.getLocation(point, function (rs) {
        var addComp = rs.addressComponents;
        var address =
          addComp.province +
          addComp.city +
          addComp.district +
          addComp.street +
          addComp.streetNumber;
      });
      let marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      map.panTo(point);
    },
  },
};
</script>
<style scoped>
#bookingMap {
  height: 560px;
}
</style>