<style scoped>
  .card {
    width: 380px;
    height: 139px;
    border: 1px solid #F0EFEF;
    border-radius: 8px;
  }

</style>
<template>
  <div class="card" id="baidu-map"></div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    mounted() {
      this.createMap();
      // this.addMarker();
      // this.addLabel()
    },
    methods: {
      createMap() {
        // if (this.map) {
        //   this.map.clearOverlays()
        // }
        // let map = new BMap.Map("baidu-map"); // 创建地图实例
        // let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
        // map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        // var marker = new BMap.Marker(point); //标记点
        // map.addOverlay(marker);
        // this.map = map;
      },
      addMarker() {
        let icon = require(`../../assets/img/info-time.png`);
        var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
          // 指定定位位置。
          // 当标注显示在地图上时，其所指向的地理位置距离图标左上
          // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
          // 图标中央下端的尖角位置。
          anchor: new BMapGL.Size(10, 25),
          // 设置图片偏移。
          // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
          // 需要指定大图的偏移位置，此做法与css sprites技术类似。
          // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
        });
        let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
        // 创建标注对象并添加到地图
        var marker = new BMapGL.Marker(point, {
          icon: myIcon
        });
        this.map.addOverlay(marker);
      },
      addLabel() {
        var point = new BMapGL.Point(116.404, 39.915);
        var content = "label";
        var label = new BMapGL.Label(content, {
          // 创建文本标注
          position: point, // 设置标注的地理位置
          offset: new BMapGL.Size(10, -80), // 设置标注的偏移量
        });
        this.map.addOverlay(label); // 将标注添加到地图中
        label.addEventListener("click", function () {
          alert("您点击了标注");
        });
        label.setStyle({
          // 设置label的样式
          color: "#000",
          fontSize: "30px",
          border: "2px solid #1E90FF",
        });
      },
    },
  }

</script>
