<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 {
                // directions: new google.maps.DirectionsService(), //获取路线请求的服务
                // renderer: new google.maps.DirectionsRenderer(), //
                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=[]
                    console.log(this.locationArray)
                    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>