<style scoped>
  .card {
    width: 100vm;
    height: 320px;
    border: 1px solid #F0EFEF;

    border-radius: 8px;
  }

</style>
<template>
  <div>
    <div class="card" :id="`baidu-map_${center.Id}`"></div>
  </div>
</template>
<script>
  export default {
    props: ["AddressObj"],
    data() {
      return {
        center: {
          Lng: 116.294625,
          Lat: 39.961627
        },
        keywords: ''
      }
    },
    watch: {
      AddressObj: {
        handler(newValue, onldValue) {
          this.center = newValue
        },
        deep: true,
        immediate: true
      },
      keywords: {
        handler(newValue, onldValue) {
          this.getLocalSearch()
        },
      }
    },
    mounted() {
      this.createMap();
      // this.addMarker();
      // this.addLabel()
      // if (this.center.Range && this.center.Range > 0) {
      //   this.addCircle()
      // }
    },
    methods: {
      createMap() {
        // if (this.map) {
        //   this.map.clearOverlays()
        // }
        // let map = new BMap.Map(`baidu-map_${this.center.Id}`); // 创建地图实例
        // let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
        // map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        // map.enableScrollWheelZoom(true);
        // var marker = new BMap.Marker(point); //标记点
        // map.addOverlay(marker);
        // this.map = map;
      },

      addMarker() {
        let icon = require(`../../assets/img/marker.png`);
        var myIcon = new BMap.Icon(icon, new BMap.Size(23, 25), {
          // 指定定位位置。
          // 当标注显示在地图上时，其所指向的地理位置距离图标左上
          // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
          // 图标中央下端的尖角位置。
          anchor: new BMap.Size(10, 25),
          // 设置图片偏移。
          // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
          // 需要指定大图的偏移位置，此做法与css sprites技术类似。
          // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
        });
        let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(point, {
          icon: myIcon
        });
        this.map.addOverlay(marker);
      },
      addLabel() {
        var point = new BMap.Point(this.center.Lng, this.center.Lat);
        var content = this.center.Address;
        var label = new BMap.Label(content, {
          // 创建文本标注
          position: point, // 设置标注的地理位置
          offset: new BMap.Size(10, -60), // 设置标注的偏移量
        });
        this.map.addOverlay(label); // 将标注添加到地图中
        label.addEventListener("click", function (e) {
          // alert("您点击了标注");
        });
        label.setStyle({
          // 设置label的样式
          color: "#000",
          fontSize: "18px",
          border: "0 solid #1E90FF",
          padding: '0 5px',
          borderRadius: '3px',
        });
      },
      addCircle() {
        var mPoint = new BMap.Point(this.center.Lng, this.center.Lat);
        var circle = new BMap.Circle(mPoint, this.center.Range, {
          fillColor: "blue",
          strokeWeight: 1,
          fillOpacity: 0.3,
          strokeOpacity: 0.3
        });
        this.map.addOverlay(circle);
        let getNeSw = circle.getBounds()
        var mPoint1 = new BMap.Point(getNeSw.ne.lng, getNeSw.ne.lat)
        var mPoint2 = new BMap.Point(getNeSw.sw.lng, getNeSw.sw.lat)
        let points = [mPoint1, mPoint2]
        this.map.centerAndZoom(mPoint, this.map.getViewport(points).zoom + 1);
      },
      getLocalSearch() {
        var mPoint = new BMap.Point(this.center.Lng, this.center.Lat);
        var local = new BMap.LocalSearch(this.map, {
          renderOptions: {
            map: this.map,
            autoViewport: false
          }
        });
        local.searchNearby(this.keywords, mPoint, this.center.Range);
      },

    },
  }

</script>
