<template>
  <div :id="id"></div>
</template>

<script>
let num = 1;
import BMapGL from "BMapGL";
export default {
  name: "bai-du-map",
  props: {
    point: {
      type: Array,
      default() {
        return [];
      },
    },
    zoom: {
      type: Number,
      default: 12,
    },
  },
  data() {
    return {
      id: `baidu-map-${num}`,
      map: null,
    };
  },
  methods: {
    init() {
      this.map = new BMapGL.Map(this.id);
      this.map.centerAndZoom(new BMapGL.Point(...this.point), this.zoom);
    },
    // 获取两地距离
    getDistance(start, end) {
      return this.map.getDistance(
        new BMapGL.Point(...start),
        new BMapGL.Point(...end)
      );
    },
    getPoint(lng, lat) {
      return this.map.getPoint(new BMapGL.Point(lng, lat));
    },
  },
  created() {
    ++num;
  },
  mounted() {
    this.init();
  },
};
</script>