<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>
