<template>
  <div>
    <div id="bmap-container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      BMap: {},
      map: {},
      marker: {}
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.loadScript(() => {
        setTimeout(() => {
          this.initMap();
        }, 200);
      });
    });
  },
  props: {
    bMapKey: {
      type: String,
      default: "e4VdXT4TQIexra84v22yLrO8sswkTNMX"
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      // 从window上获取BMapGL，挂载在当前vue对象
      this.BMap = window.BMapGL;
      console.log(this.BMap);
      this.map = new this.BMap.Map("bmap-container");
      // 创建地图实例
      let point = new this.BMap.Point(116.404, 39.915);
      // 创建点坐标
      this.map.centerAndZoom(point, 15);
      // 初始化地图，设置中心点坐标和地图级别
      // this.map.enableScrollWheelZoom(true);
      this.map.setHeading(64.5); //设置地图旋转角度
      this.map.setTilt(73); //设置地图的倾斜角度
      this.createMapMarker();//创建生成marker
      this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      this.createControl();//创建控件
      let navi3DCtrl = new this.BMap.NavigationControl3D(); // 添加3D控件
      this.map.addControl(navi3DCtrl);
      this.clickEventHnadler();//点击事件
    },

    // 点击地图事件

    clickEventHnadler(){
      this.map.addEventListener('click', (res)=>{
        console.log(res);
      });
      
    },
    // 创建marker
    createMapMarker() {
      this.marker = new this.BMap.Marker(new this.BMap.Point(116.404, 39.915)); // 创建点
      this.map.addOverlay(this.marker);
    },
    // 创建控件
    createControl() {
      let scaleCtrl = new this.BMap.ScaleControl(); // 添加比例尺控件
      this.map.addControl(scaleCtrl);
      let zoomCtrl = new this.BMap.ZoomControl(); // 添加比例尺控件
      this.map.addControl(zoomCtrl);
    },
    // 加载百度地图api
    loadScript(callback) {
      console.log(this.bMapKey);
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${this.bMapKey}&callback=initialize`;

      document.body.appendChild(script);
      if (script.readyState) {
        //IE
        //这里只有反人类设计的IE才有
        script.onreadystatechange = function() {
          if (
            script.readyState == "complete" ||
            script.readyState == "loaded"
          ) {
            script.onreadystatechange = null;
            //callback&&callback()是判断传入的回调函数是不是空的如果是空的就不执行，如果不是空的就执行
            callback && callback();
          }
        };
      } else {
        //非IE
        script.onload = function() {
          callback && callback();
        };
      }
    }
  }
};
</script>

<style lang="less" scoped>
#bmap-container {
  height: 400px;
}
</style>