{% extends "otherTools/index.html" %}
{% block title %}msgSetting{% endblock %}
{% block content_01 %}
<script src="../../static/js/messageTools/setting.js"></script>
<script src="../../static/js/coordtransform.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d96c8dc7e0d6c636d65e6f6d75b0ccb4&plugin=AMap.Geocoder&plugin=AMap.RangingTool"></script>
<style>
    .nav-pills li {
        margin-bottom:5px;
    }
    .form-control {
        display:inline;
        width:160px;
    }
    .protocol_content:after{
        clear:both;
        display:block;
        content:" ";
    }

    .protocol_content li {
        width:250px;
        _background:yellow;
        list-style:none;
        margin-top:5px;
        float:left;
    }
    .protocol_content label{
        width:90px;
        text-align:right;
    }
    #container:hover{
        cursor:crosshair;
    }
</style>
<div id="container2" style="width:85%;min-height:750px;float:left;_background:pink;">
    {% block content_1 %}
    <div id="container3" style="width:100%;min-height:750px;float:left;_background:pink;margin-top:10px;_border-top: 1px solid #eee;">

        <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group" style="width:400px;height:35px;background:pink;z-index:50;position:absolute;top:120px;right:40px;border-radius:5px;">
          <a href="#" class="btn btn-default" role="button" id="ctrArea1" onclick="ctrAreaShow(this)">轨迹点查询</a>
          <a href="#" class="btn btn-default" role="button" id="ctrArea2" onclick="ctrAreaShow(this)">轨迹工具</a>
          <a href="#" class="btn btn-default" role="button" id="ctrArea3" onclick="ctrAreaShow(this)">其他工具</a>
        </div>
        <div id="ctrArea_1" style="width:400px;height:175px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
            <div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
                <label>经 ，纬 度 ：</label><input id="toLngLat" type="text" class="form-control" value="106.54041,29.40268" style="width:200px;">
                <button type="button" class="btn btn-default" onclick="setposition()">定位</button>
                <h5>地址：<p style="display:inline;" id="toLngLatInfo"></p></h5>
            </div>
            <div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
                <label>当前经纬度：</label><input id="curLngLat" type="text" class="form-control" value="106.587436,29.565099" style="width:200px;"> <label style="font-size:10px;">点击地图自动获取</label>
                <h5>地址：<p style="display:inline;" id="curLngLatInfo"></p></h5>
            </div>
        </div>
        <div id="ctrArea_2" style="width:400px;height:250px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
            <p>支持录制轨迹和回放轨迹（功能待开发）</p>
        </div>
        <div id="ctrArea_3" style="width:400px;height:60px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
            <div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
                <label>测距：</label>
                <button type="button" class="btn btn-default" onclick="distance()">开始测距</button>
                <button type="button" class="btn btn-default" onclick="undistance()">停止测距</button>
                <label id="distanceTxt" style="color:red;">未测距</label>
            </div>
        </div>
        <div id="container" style="width:100%; height: 750px;">

        </div>
    </div>



    <script>
    var map = undefined;
    var curShow = "";
    //控制点击地图的触发事件 0:默认 1：测距
    var clickType = 0;
    //获取经纬度地址信息类
    var geocoder = undefined;
    var marker = undefined;  //单个点标记
    //测距样式
    var ruler1 = undefined;
    //加载地图
    (function(){
        map = new AMap.Map('container', {
            zoom:13,//级别
            center: [106.587436, 29.565099]
        });
        //初始化获取距离工具
        geocoder = new AMap.Geocoder({});
        //初始化测距工具
        ruler1 = new AMap.RangingTool(map);
    })();
    //处理地图点击事件
    map.on('click', function(ev) {
        if(clickType == 0){
            var lnglat = ev.lnglat;
            var lnglattxt = lnglat["lng"] + "," + lnglat["lat"];
            //国测坐标（高德坐标），转wgs84 （原始坐标）
            var rawGps = coordtransform.gcj02towgs84(parseFloat(lnglat["lng"]), parseFloat(lnglat["lat"]));
            var lnglattxtraw = rawGps[0].toFixed(6) + "," + rawGps[1].toFixed(6);
            $("#curLngLat").val(lnglattxtraw);

            if(marker != undefined){
                map.remove(marker);
            }
            var theGps = lnglattxt.split(",")
            marker = new AMap.Marker({
                position: new AMap.LngLat(theGps[0],theGps[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                //position: new AMap.LngLat(rawGps[0],rawGps[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '定位'
            });
            map.add(marker);
            //显示经纬度地址信息
            geocoder.getAddress(theGps, function(status, result) {
                if (status === 'complete'&&result.regeocode) {
                    var address = result.regeocode.formattedAddress;
                    $("#curLngLatInfo").text(address);
                    $("#toLngLatInfo").text("");
                }else{
                    log.error('根据经纬度查询地址失败');
                }
            });
        }
    });
    function ctrAreaShow(e){
        var cliId = $(e).attr("id");
        if(cliId == "ctrArea1"){
            if(curShow == "ctrArea1"){
                $("#ctrArea_1").css("display","none");
                curShow = "";
            }else{
                $("#ctrArea_1").css("display","block");
                $("#ctrArea_2").css("display","none");
                $("#ctrArea_3").css("display","none");
                curShow = "ctrArea1";
            }
        }else if(cliId == "ctrArea2"){
            if(curShow == "ctrArea2"){
                $("#ctrArea_2").css("display","none");
                curShow = "";
            }else{
                $("#ctrArea_1").css("display","none");
                $("#ctrArea_2").css("display","block");
                $("#ctrArea_3").css("display","none");
                curShow = "ctrArea2";
            }
        }else if(cliId == "ctrArea3"){
            if(curShow == "ctrArea3"){
                $("#ctrArea_3").css("display","none");
                curShow = "";
            }else{
                $("#ctrArea_1").css("display","none");
                $("#ctrArea_2").css("display","none");
                $("#ctrArea_3").css("display","block");
                curShow = "ctrArea3";
            }
        }
    }

    //设置地图中心点，移动地图
    function setposition(){
        if(marker != undefined){
            map.remove(marker);
        }
        var theGps = $("#toLngLat").val().split(",")

        AMap.convertFrom(theGps,'gps', function (status, result) {
          if (result.info === 'ok') {
            var cvtGps = [result["locations"][0]["lng"],result["locations"][0]["lat"]];
            //var cvtGps = coordtransform.wgs84togcj02(parseFloat(theGps[0]), parseFloat(theGps[1]));
            marker = new AMap.Marker({
                //position: new AMap.LngLat(theGps[0],theGps[1]),   // 使用原始经纬度
                position: new AMap.LngLat(cvtGps[0],cvtGps[1]),    // 使用转换为高德地图标记的经纬度
                title: '定位'
            });
            map.setCenter(theGps);
            map.add(marker);
            //显示经纬度地址信息
            geocoder.getAddress(cvtGps, function(status, result) {
                if (status === 'complete'&&result.regeocode) {
                    var address = result.regeocode.formattedAddress;
                    $("#toLngLatInfo").text(address);
                }else{
                    log.error('根据经纬度查询地址失败');
                }
            });
          }
        });
    }

    //测距
    function distance(){
        clickType = 1;
        ruler1.turnOn();
        $("#distanceTxt").text("测距中");
    }
    //取消测距
    function undistance(){
        clickType = 0;
        ruler1.turnOff();
        $("#distanceTxt").text("未测距");
    }
    </script>
    {% endblock %}
</div>
{% endblock %}