<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 (!BMapGL) {
            return;
          }
          let map = new BMapGL.Map(`baidu-map_${this.center.Id}`); // 创建地图实例
          let point = new BMapGL.Point(this.center.Lng, this.center.Lat); // 创建点坐标
          map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
          map.enableScrollWheelZoom(true); 
          var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
          map.addControl(scaleCtrl);
          var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件//开启鼠标滚轮缩放
          map.addControl(zoomCtrl);
          this.map = map;
        },
        
        addMarker() {
          let icon = require(`../../assets/img/marker.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(this.center.Lng, this.center.Lat); // 创建点坐标
          // 创建标注对象并添加到地图
          var marker = new BMapGL.Marker(point, { icon: myIcon });
          this.map.addOverlay(marker);
        },
        addLabel() {
          var point = new BMapGL.Point(this.center.Lng, this.center.Lat);
          var content = this.center.Address;
          var label = new BMapGL.Label(content, {
            // 创建文本标注
            position: point, // 设置标注的地理位置
            offset: new BMapGL.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 BMapGL.Point(this.center.Lng, this.center.Lat);
            var circle = new BMapGL.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 BMapGL.Point(getNeSw.ne.lng,getNeSw.ne.lat)
            var mPoint2 = new BMapGL.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 BMapGL.Point(this.center.Lng, this.center.Lat);
          var local =  new BMapGL.LocalSearch(this.map, {renderOptions: {map: this.map, autoViewport: false}});  
          local.searchNearby(this.keywords,mPoint,this.center.Range);
        },
        
      },
    }
    </script>
    