<style>
  .markers_labels {
    margin-left: -24px !important;
    margin-top: -43px !important;
  }

  .gm-svpc,
  .gm-style-mtc,
  .gm-style-cc {
    display: none;
  }

  .classA {
    background-size: 700px 1600px;
    background-position: 0px -1200px;
    width: 34px;
    height: 34px;
    position: absolute;
    left: -16px;
    top: -16px;
  }

  .labels {
    width: 30px;
    height: 30px;
    position: relative;
    bottom: -200px;
  }

  .BMap_cpyCtrl {
    display: none;
  }

  .anchorBL {
    display: none;
  }

  .BMap_bubble_pop img {
    display: none !important;
  }

</style>

<template>
  <div style="height:100%;">
    <div id="map_canvas" style="height: 100%; width: 100%"></div>
  </div>
</template>
<script>
  export default {
    props: ["locationArray", "type"],
    data() {
      return {

        polyline: {}, //线路
        map: {},
        icons: {
          trafficImage: "http://imgfile.oytour.com/static/location_01.png",
          hotelImage: "http://imgfile.oytour.com/static/location_hotel.png",
          scenicImage: "http://imgfile.oytour.com/static/location_scenic.png",
          planeImage: "http://imgfile.oytour.com/static/location_plane.png"
        },
        markerArray: [], //标记数组
      }
    },
    watch: {
      locationArray(newValue, old) {
        this.mapBuild()
      }
    },
    created() {

    },
    destroyed: function () {

    },
    mounted() {
      this.mapBuild() //初始化实例之后调用
    },
    methods: {
      mapBuild() {
        // let Bmap = window.BMapGL
        // this.markerArray = [];
        // if (this.locationArray && this.locationArray.length > 0) {
        //   let points = []
        //   this.locationArray.forEach(x => {
        //     if (x.lng != '' && x.lat != '') {
        //       points.push(new Bmap.Point(x.lng, x.lat))
        //     }

        //   })
        //   var b = new Bmap.Map('map_canvas')
        //   this.map = b
        //   let view = b.getViewport(points)
        //   b.centerAndZoom(view.center, view.zoom)
        //   b.enableScrollWheelZoom(true)
        //   let allPoints = [];
        //   //去掉重复的数据
        //   this.locationArray.forEach((x, index) => {
        //     if (x.lat && x.lng) {
        //       let obj = {
        //         location: x.lat + ',' + x.lng,
        //         type: x.type,
        //         name: x.name,
        //         isFly: x.isFly,
        //         trafficType: x.trafficType
        //       }
        //       if (this.type == 1) {
        //         if (!this.checkItemIsExists(allPoints, obj)) {
        //           allPoints.push(obj);
        //         }
        //       } else {
        //         if (!this.checkItemIsExists(allPoints, obj, 2)) {
        //           allPoints.push(obj);
        //         }
        //       }
        //     }
        //   });
        //   this.calcRoute(allPoints)
        // }

      },
      checkItemIsExists(arr, checkItem, type) {
        var isExists = false;
        for (var i = 0; i < arr.length; i++) {
          if (type) {
            if (arr[i].location == checkItem.location && !isExists && arr[i].type == checkItem.type) {
              isExists = true;
            }
          } else {
            if (arr[i].location == checkItem.location && !isExists) {
              isExists = true;
            }
          }

        }
        return isExists;
      },
      //画驾车路线图
      drawDrivingRute(array) {
        let points = []
        let Bmap = window.BMapGL
        for (var i = 0; i < array.length; i++) {
          var form_loc = array[i].location.split(',');
          points.push(new Bmap.Point(form_loc[1], form_loc[0]))
        }
        var polyline = new BMapGL.Polyline(points, {
          strokeColor: "black",
          strokeWeight: 2,
          strokeOpacity: 0.5
        });
        this.map.addOverlay(polyline);
      },
      calcRoute: function (waypoints) {
        let _this = this;
        var startArray = waypoints[0].location.split(',');
        let lat = parseFloat(startArray[0]);
        let lng = parseFloat(startArray[1]);
        //全部
        if (this.type == 1) {
          this.drawDrivingRute(waypoints);
          waypoints.forEach((item, index) => {
            this.addMarker(item, index + 1);
          });
        }
        //每天
        else {
          for (var i = 0; i < waypoints.length - 1; i++) {
            var currentItem = waypoints[i];
            var nextItem = waypoints[i + 1];
            if (currentItem && currentItem.trafficType == 4) {
              this.drawWalkRoute(currentItem.location, nextItem.location);
            } else {
              var newArray = [];
              newArray.push(currentItem);
              newArray.push(nextItem);
              this.drawDrivingRute(newArray);
            }
            if (i == 0) {
              this.addMarker(currentItem, i + 1);
            } else {
              var preitem = waypoints[i - 1];
              var startArray = preitem.location.split(',');
              var currentArray = currentItem.location.split(',');
              var currentdistance = this.CalcDistance(currentArray[0], currentArray[1], startArray[0],
                startArray[1]);
              this.addMarker(currentItem, i + 1, currentdistance);
              if (i == waypoints.length - 2) {
                var nextArray = nextItem.location.split(',');
                var nextdistance = this.CalcDistance(nextArray[0], nextArray[1], currentArray[0],
                  currentArray[1]);
                this.addMarker(nextItem, i + 2, nextdistance);
              }
            }
          }
        }
      },
      addMarker(obj, title, distance) {
        var loc = obj.location.split(',');
        //生成标记图标
        var image = {}
        var type = obj.type;
        var isFly = obj.isFly;
        //交通
        if (type == 1) {
          image = {
            url: this.icons.trafficImage, // image is 512 x 512
            scaledSize: new BMapGL.Size(30, 40),
          };
        }
        //住宿
        if (type == 3) {
          image = {
            url: this.icons.hotelImage,
            scaledSize: new BMapGL.Size(40, 40),
          }
        }
        //景点
        if (type == 2) {
          image = {
            url: this.icons.scenicImage,
            scaledSize: new BMapGL.Size(35, 45),
          }
        }
        //飞机
        if (isFly == 1) {
          image = {
            url: this.icons.planeImage,
            scaledSize: new BMapGL.Size(30, 30),
          }
        }
        var myIcon = new BMapGL.Icon(image.url, image.scaledSize)
        var marker = new BMapGL.Marker(new BMapGL.Point(loc[1], loc[0]), {
          icon: myIcon
        }); // 将图标和坐标进行关联
        this.map.addOverlay(marker); // 将关联好的结果进行放置                                  
        var opts = {
          position: new BMapGL.Point(loc[1], loc[0]), // 指定文本标注所在的地理位置
          offset: new BMapGL.Size(0, 0) // 设置文本偏移量
        };
        var label = new BMapGL.Label(title, opts); // 创建文本标注对象
        label.setStyle({
          background: '#fff',
          borderRadius: '50%',
          marginLeft: '-10px',
          marginTop: '-16px',
          width: '19px',
          height: '19px',
          textAlign: 'center',
          lineHeight: '20px',
          border: 'none'
        }); // 自定义文本标注样式
        this.map.addOverlay(label);
        //景点
        if (type == 2) {
          var str = '<div>' + obj.name + '</div>';
          if (distance) {
            str += '<br/><div>' + distance + 'KM<div>'
          }
          var infoWindow = new BMapGL.InfoWindow(str, { // 创建信息窗口对象
            width: 50, // 信息窗口宽度
          })
          marker.addEventListener("click", function () { // 创建点击事件    
            this.map.openInfoWindow(infoWindow, opts.position); //开启信息窗口
          });

        }
        if (type == 3 || type == 2 || isFly == 1) {
          label.setContent('')
          label.setStyle({
            background: 'transparent'
          })
        }

      },
      getRad(d) {
        return d * Math.PI / 180.0;
      },
      CalcDistance(lat1, lng1, lat2, lng2) {
        var EARTH_RADIUS = 6378137.0; //单位M
        var radLat1 = this.getRad(lat1);
        var radLat2 = this.getRad(lat2);
        var a = radLat1 - radLat2;
        var b = this.getRad(lng1) - this.getRad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) *
          Math.pow(Math.sin(b / 2), 2)));
        s = s * EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000.0 / 1000.0;
        return Math.round(s);
      },
      convertPointer(ggPoint, cb) {
        let BMap = window.BMapGL
        var convertor = new BMap.Convertor();
        var pointArr = [];
        pointArr.push(ggPoint);
        convertor.translate(pointArr, 1, 5, cb)
      }
    },
  }

</script>
