<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>Tour Map</title>
        <script type="text/javascript" src="https://data.chinahighlights.com/js/min.php?f=/js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.10&key=b91a08b248b7db3e15a28eb3926650de'></script>
        <script src="https://webapi.amap.com/ui/1.0/main.js"></script>

        <style>
            html,
            body,
            #container {
                width: 100%;
                height: 100%;
                margin: 0px;
            }
            .amap-marker-label{
                border: 0;
                background-color: transparent;
            } 
            .markerInfo {
                background: rgba(255, 255, 255, 0.7);
                padding: 2px 5px;
                border: 1px solid #ccc;
                white-space: nowrap;
            }

        </style>

    </head>
    <body>
        <!--
        根据行程生成地图，数据格式：
        起点名称，起点坐标，终点名称，终点坐标，交通工具，交通工具备注（如航班号，车次等）
        data['start']='Beijing';//出发地
        data['start_lng']='116.41667';//经度
        data['start_lat']='39.91667';//纬度
        data['end']='Xian';
        data['end_lng']='108.95000';//经度
        data['end_lat']='34.26667';//纬度
        data['traffic']='2';//交通类型 2火车 3飞机 4游船 5小车
        data['memo']='G87';//备注，显示航班号，里程等等

        -->
        <?php
        $tour = array();
        $tour[] = array('start' => 'Beijing', 'start_lng' => '116.41667', 'start_lat' => '39.91667', 'end' => 'urumqi', 'end_lng' => '87.61792', 'end_lat' => '43.793308', 'traffic' => '2', 'memo' => 'G87');
        $tour[] = array('start' => 'Beijing', 'start_lng' => '116.41667', 'start_lat' => '39.91667', 'end' => 'Xian', 'end_lng' => '108.95000', 'end_lat' => '34.26667', 'traffic' => '2', 'memo' => 'G87');
        $tour[] = array('start' => 'Xian', 'start_lng' => '108.95000', 'start_lat' => '34.26667', 'end' => 'Guilin', 'end_lng' => '110.290247', 'end_lat' => '25.273915', 'traffic' => '3', 'memo' => 'CA1225');
        $tour[] = array('start' => 'Guilin', 'start_lng' => '110.290247', 'start_lat' => '25.273915', 'end' => 'Longsheng', 'end_lng' => '110.648739', 'end_lat' => '24.828426', 'traffic' => '5', 'memo' => '');
        $tour[] = array('start' => 'Longsheng', 'start_lng' => '110.648739', 'start_lat' => '24.828426', 'end' => 'Guilin', 'end_lng' => '110.290247', 'end_lat' => '25.273915', 'traffic' => '5', 'memo' => '');
        $tour[] = array('start' => 'Guilin', 'start_lng' => '110.290247', 'start_lat' => '25.273915', 'end' => 'Yangshuo', 'end_lng' => '110.496593', 'end_lat' => '24.778481', 'traffic' => '5', 'memo' => '');
        $tour[] = array('start' => 'Yangshuo', 'start_lng' => '110.496593', 'start_lat' => '24.778481', 'end' => 'Guilin', 'end_lng' => '110.290247', 'end_lat' => '25.273915', 'traffic' => '5', 'memo' => '');
        $tour[] = array('start' => 'Guilin', 'start_lng' => '110.290247', 'start_lat' => '25.273915', 'end' => 'Shanghai', 'end_lng' => '121.473658', 'end_lat' => '31.230378', 'traffic' => '3', 'memo' => 'FM9350');


        $map_data = $this->input->get('map_data');
//echo $map_data;
        $debug = $this->input->get('debug');
        if (!empty($debug)) {
            print_r(base64_decode($map_data));
        }
        ?>
        <div id="container"></div>


        <script type="text/javascript">


            var tour_data = '<?php echo base64_decode($map_data); ?>';

            $(function () {


                //创建地图
                var map = new AMap.Map('container', {
                    zoom: 5,
                    center: [116.397428, 39.90923],
                    lang: "en",
                    mapStyle: "amap://styles/whitesmoke"
                });
                AMapUI.loadUI(['overlay/AwesomeMarker'],
                        function (AwesomeMarker) {
                            //icon的取值请见  http://fontawesome.io/icons/
                            var awIcons = [
                                'arrow-left',
                                'arrow-right',
                                'bookmark',
                                'city'
                            ];
                            var cityIcon = new AMap.Icon({
                                size: new AMap.Size(12, 12)
                            });
                            //标记出目的地
                            $.each(JSON.parse(tour_data), function (index, element) {

                                awesomeIcon = awIcons[2]; //经过的城市图标
                                awesomeIcon_start = false; //入境城市
                                awesomeIcon_end = false; //出境城市
                                
                                if (index === 0) {
                                    awesomeIcon_start = awIcons[0];
                                    var marker_start = new AwesomeMarker({
                                        awesomeIcon: awesomeIcon_start,
                                        iconStyle: 'orange',
                                        map: map,
                                        position: [element.start_lng, element.start_lat],
                                        title: element.start,
                                        label: {content: element.start, offset: new AMap.Pixel(30, 8)}
                                    });
                                } 
                                if (index === JSON.parse(tour_data).length - 1) {
                                    awesomeIcon_end = awIcons[1];
                                    var marker_end = new AwesomeMarker({
                                        awesomeIcon: awesomeIcon_end,
                                        iconStyle: 'orange',
                                        map: map,
                                        position: [element.end_lng, element.end_lat],
                                        title: element.end,
                                        label: {content: element.end, offset: new AMap.Pixel(30, 8)}
                                    });
                                }  
                                
                                    var marker_pass = new AMap.Marker({
                                        position: [element.start_lng, element.start_lat],
                                        offset: new AMap.Pixel(-3, -3),
                                        icon: new AMap.Icon({
                                            image: '/css/images/point.png',
                                            siez: new AMap.Size(8, 8)
                                        }),
                                        title: element.start,
                                        map: map,
                                        label: {content: element.start, offset: new AMap.Pixel(8, -8)}
                                    });
                              


                                //画曲线
                                var path_data_control = vertical_line(element.start_lng, element.start_lat, element.end_lng, element.end_lat);
                                var pathdata = [
                                    [element.start_lng, element.start_lat],
                                    [element.start_lng, element.start_lat, path_data_control.lng, path_data_control.lat, element.end_lng, element.end_lat],
                                    [element.end_lng, element.end_lat]
                                ];

                                var bezierCurve = new AMap.BezierCurve({
                                    path: pathdata, //设置线覆盖物路径
                                    strokeColor: '#3366FF', // 线颜色
                                    strokeOpacity: 1, // 线透明度
                                    strokeWeight: 5, // 线宽
                                    strokeStyle: 'solid', // 线样式
                                    strokeDasharray: [10, 5], // 补充线样式
                                    showDir: true
                                });
                                bezierCurve.setMap(map);

                                //绘制交通图标
                                //2火车 3飞机 4游船 5小车
                                switch (element.traffic) {
                                    case '2':
                                        tour_traffic = '/css/images/train.png';
                                        break;
                                    case '3':
                                        tour_traffic = '/css/images/plane.png';
                                        break;
                                    case '4':
                                        tour_traffic = '/css/images/ship.png';
                                        break;
                                    case '5':
                                        tour_traffic = '/css/images/car.png';
                                        break;
                                    default:
                                        tour_traffic = '/css/images/car.png';
                                }
                                
                                var $markerContent ='';
                                if (element.memo !== '') {
                                    $markerContent = '<div class="markerInfo">'+element.memo+'</div>';
                                }
                                bezierCurveCenter=vertical_line(element.start_lng, element.start_lat, element.end_lng, element.end_lat,0.3);
                                new AMap.Marker({
                                    position: [bezierCurveCenter.lng, bezierCurveCenter.lat],
                                    offset: new AMap.Pixel(-3, -3),
                                    icon: new AMap.Icon({
                                        image: tour_traffic,
                                        siez: new AMap.Size(8, 8)
                                    }),
                                    title: bezierCurveCenter.lng + ',' + bezierCurveCenter.lat,
                                    label: {content: $markerContent, offset: new AMap.Pixel(20, -10)},
                                    map: map
                                });


                            });
                        });
                /*
                 //画轨迹
                 
                 AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
                 
                 if (!PathSimplifier.supportCanvas) {
                 alert('当前环境不支持 Canvas！');
                 return;
                 }
                 
                 var pathSimplifierIns = new PathSimplifier({
                 zIndex: 100,
                 //autoSetFitView:true,//自动调整地图视野以适合全部轨迹
                 map: map, //所属的地图实例
                 getPath: function(pathData, pathIndex) {
                 return pathData.path;
                 }
                 });
                 
                 window.pathSimplifierIns = pathSimplifierIns;
                 
                 var path_data=new Array();
                 $.each(JSON.parse(tour_data), function (index, element) {
                 path_data.push({'name':index,'path':PathSimplifier.getGeodesicPath([element.start_lng, element.start_lat], [element.end_lng, element.end_lat], 30)});
                 });	
                 
                 //设置数据
                 pathSimplifierIns.setData(path_data);
                 
                 $.each(JSON.parse(tour_data), function (index, element) {
                 //交通工具 plane car train ship
                 var tour_traffic='';
                 var tour_speed=500000;//巡航速度，单位千米/小时
                 var tour_memo=element.memo;
                 
                 //2火车 3飞机 4游船 5小车
                 switch(element.traffic){
                 case '2':
                 tour_traffic='/css/images/train.png';
                 tour_traffic_width=32;
                 tour_traffic_height=32;
                 tour_speed=50000;
                 break;
                 case '3':
                 tour_traffic='/css/images/plane.png';
                 tour_traffic_width=32;
                 tour_traffic_height=32;
                 tour_speed=500000;
                 break;
                 case '4':
                 tour_traffic='/css/images/ship.png';
                 tour_traffic_width=22;
                 tour_traffic_height=80;
                 tour_speed=50000;
                 break;
                 case '5':
                 tour_traffic='/css/images/car.png';
                 tour_traffic_width=32;
                 tour_traffic_height=32;
                 tour_speed=5000;
                 break;
                 default:
                 tour_traffic='/css/images/car.png';
                 tour_traffic_width=32;
                 tour_traffic_height=32;
                 tour_speed=50000;
                 }
                 
                 //创建一个巡航器
                 var navigator = pathSimplifierIns.createPathNavigator(index, {
                 loop: true, //循环播放
                 speed: tour_speed, //巡航速度，单位千米/小时
                 pathNavigatorStyle: {
                 width: tour_traffic_width,
                 height: tour_traffic_height,
                 //使用图片
                 content: PathSimplifier.Render.Canvas.getImageContent(tour_traffic, onload, onerror),
                 strokeStyle: null,
                 fillStyle: null,
                 //经过路径的样式
                 pathLinePassedStyle: {
                 lineWidth: 6,
                 //strokeStyle: 'black',
                 dirArrowStyle: {
                 stepSpace: 15,
                 strokeStyle: 'red'
                 }
                 }
                 }
                 });
                 
                 
                 //让导航器暂停，交通图标显示在中间节点
                 //console.log(navigator.range); 
                 navigator.start(12);
                 navigator.pause();
                 
                 
                 //添加备注信息
                 
                 if(tour_memo!==''){
                 var $markerContent = $('<div class="markerInfo"></div>');
                 $markerContent.html(tour_memo);
                 navigator.marker = new AMap.Marker({
                 offset: new AMap.Pixel(15, -10),
                 content: $markerContent.get(0),
                 map: map
                 });
                 navigator.marker.setPosition(navigator.getPosition());
                 }
                 
                 });	
                 
                 }); 
                 */

                /*
                 //贝赛尔曲线经过的起点，途经点，控制点，终点的二维数组
                 var position_beijing= new AMap.LngLat(116.39, 39.9);
                 var position_xian= new AMap.LngLat(108.939621,34.343147);
                 var position_guilin= new AMap.LngLat(110.290247,25.273915);
                 var position_urumqi= new AMap.LngLat(87.61792, 43.793308);
                 var position_shanghai= new AMap.LngLat(121.473658,31.230378);
                 
                 
                 var position_start=position_beijing;
                 var position_end=position_xian;
                 var path_data_control=vertical_line(position_start.lng, position_start.lat,position_end.lng, position_end.lat);
                 var position_control=new AMap.LngLat(path_data_control.lng, path_data_control.lat);
                 console.log(position_control);
                 console.log(position_xian);
                 
                 var pathdata = [
                 position_start,
                 [position_start.lng, position_start.lat,position_control.lng, position_control.lat,position_end.lng, position_end.lat],
                 position_end
                 ]  ;
                 
                 
                 var bezierCurve = new AMap.BezierCurve({
                 path:pathdata,      //设置线覆盖物路径
                 strokeColor: '#3366FF',   // 线颜色
                 strokeOpacity: 1,         // 线透明度
                 strokeWeight: 2,          // 线宽
                 strokeStyle: 'solid',     // 线样式
                 strokeDasharray: [10, 5], // 补充线样式
                 showDir:true
                 });
                 bezierCurve.setMap(map); 
                 
                 });
                 */
                //vertical_line(116.39, 39.9,87.61792, 43.793308);
            });
            //根据两点坐标求过中点的垂线
            //Threshold 阈值，用来调整曲线开口大小
            function vertical_line(Ax, Ay, Bx, By,Threshold) {
                Ax = parseFloat(Ax);
                Ay = parseFloat(Ay);
                Bx = parseFloat(Bx);
                By = parseFloat(By);
                Threshold = typeof Threshold !== 'undefined' ?  Threshold : 0.6;
                var x, y;
                var Mx = (Ax + Bx) / 2;
                var My = (Ay + By) / 2;
                //console.log(Mx + ',' + My);
                //根据终点纬度高低来确定曲线开口方向
                if (Ay >= By) {
                    x = Mx - Threshold;
                } else {
                    x = Mx + Threshold;
                }
                y = My - (Bx - Ax) * (x - Mx) / (By - Ay);
                //console.log(y);
                return {'lng': x, 'lat': y};
                y = My - 0.5;
                x = Mx - (y - My) * (By - Ay) / (Bx - Ax);
                //console.log(x);
            }


        </script>
    </body>

</html>