<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;
    }
</style>

<template>
    <div style="height:100%;">
        <div id="map_canvas" style="height: 100%; width: 100%"></div>
    </div>
</template>
<script>
    export default {
        props: ["locationArray", "type"],
        name: 'tripMap',
        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 _this = this;
                
                this.markerArray = [];
                if (this.locationArray && this.locationArray.length > 0) {
                    let bounds = new google.maps.LatLngBounds();
                    this.locationArray.forEach(x=>{
                        let myLatLng = new google.maps.LatLng(x.lat, x.lng);
                        bounds.extend(myLatLng);
                    })
                    let lat = parseFloat(this.locationArray[0].lat)
                    let lng = parseFloat(this.locationArray[0].lng)
                    let center = {
                        lng: lng,
                        lat: lat
                    }
                    
                    //创建地图实例，zoom是缩放比例
                    this.map = new google.maps.Map(document.getElementById('map_canvas'), {
                        zoom: 7,
                        center: center,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        gestureHandling: 'greedy'
                    });
                    this.map.fitBounds(bounds)
                    this.renderer.setMap(this.map);
                    var lineSymbol = {
                        path: 'M 0,-1 0,1',
                        strokeOpacity: 1,
                        strokeWeight: 2,
                        
                    };
                    // 线条设置
                    var polyOptions = {
                        strokeColor: '#000000', // 颜色
                        strokeOpacity: 1, // 透明度
                        strokeWeight: 2, // 宽度
                        //icons:[{icon:lineSymbol,offset: '0',repeat: '20px'}]
                    }
                    this.polyline = new google.maps.Polyline(polyOptions);
                    this.polyline.setMap(this.map); // 装载
                    

                    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;
            },
            // 创建路径规划
            calcRoute: function (waypoints) {
                let _this = this;
                var startArray = waypoints[0].location.split(',');
                let lat = parseFloat(startArray[0]);
                let lng = parseFloat(startArray[1]);
                this.map.setCenter(new google.maps.LatLng(lat, lng));
                this.map.setZoom(10);
                //全部
                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);
                            }
                        }
                    }
                }
            },
            //画驾车路线图
            drawDrivingRute(array) {
                for (var i = 0; i < array.length; i++) {
                    var form_loc = array[i].location.split(',');
                    var path = this.polyline.getPath(); //获取线条的坐标
                    path.push(new google.maps.LatLng(form_loc[0], form_loc[1])); //为线条添加标记坐标
                }
            },
            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 google.maps.Size(30, 40),
                    };
                }
                //住宿
                if (type == 3) {
                    image = {
                        url: this.icons.hotelImage,
                        scaledSize: new google.maps.Size(40, 40),
                    }
                }
                //景点
                if (type == 2) {
                    image = {
                        url: this.icons.scenicImage,
                        scaledSize: new google.maps.Size(35, 45),
                    }
                }
                //飞机
                if (isFly == 1) {
                    image = {
                        url: this.icons.planeImage,
                        scaledSize: new google.maps.Size(30, 30),
                    }
                }
                let marker = new MarkerWithLabel({
                    position: new google.maps.LatLng(loc[0], loc[1]),
                    icon: image, //标记自定义图标
                    draggable: false, //不可拖动
                    map: this.map, //地图实例 
                    labelContent: title, //label的内容
                    labelAnchor: new google.maps.Point(0, 0), //label的位置，可以调
                    labelClass: "labels", // the CSS class for the label
                    labelStyle: {
                        background: '#fff',
                        borderRadius: '50%',
                        marginLeft: '-10px',
                        marginTop: '-35px',
                        width: '19px',
                        height: '19px',
                        textAlign: 'center',
                        lineHeight: '20px'
                    }
                });
                
                //景点
                if (type == 2) {
                    var str = '<div>' + obj.name + '</div>';
                    if (distance) {
                        str += '<br/><div>' + distance + 'KM<div>'
                    }
                    let infowindow = new google.maps.InfoWindow({
                        content: str,
                        size: new google.maps.Size(50, 50)
                    });

                    infowindow.open(this.map, marker);
                    marker.addListener('click', function () {
                        infowindow.close();
                    })
                }
                if (type == 3 || type == 2 || isFly == 1) {
                    marker.labelContent = ''
                    marker.labelStyle = 'background:transparent'
                }
            },
            //步行路线请求内容
            drawWalkRoute(from_g, to_g) {
                var request = {
                    origin: from_g,
                    destination: to_g,
                    travelMode: google.maps.DirectionsTravelMode.WALKING,
                    provideRouteAlternatives: true,
                    transitOptions: {}
                };
                var _this = this;
                this.directions.route(request, function (response, status) { //绘制路线
                    if (status == google.maps.DirectionsStatus.OK) {
                        _this.renderer.setDirections(response);
                        _this.renderer.setMap(_this.map);
                        _this.renderer.setOptions({
                            suppressMarkers: true
                        });
                    } else {
                        renderer.setMap(null);
                    }
                });
            },
            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);
            }
        },
    }
</script>