{% load staticfiles %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>

    </title>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=EpbgpqakDpXGN9E3ejg6e93ffsi83b0t"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">

    <style>
        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        html,
        body,
        mapDiv {
            overflow: hidden;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100vh;
        }

        .anchorBL {
            display: none;
        }

        .BMapLib_SearchInfoWindow {
            border-radius: 10px;
            border-color: #ddd;
            margin-left: -25px;
        }

        .BMapLib_bubble_title {
            border-radius: 10px 10px 0 0;
            font-weight: bold;
        }

        .BMapLib_SearchInfoWindow .BMapLib_bubble_top {
            border: none;
        }

        .BMapLib_SearchInfoWindow .BMapLib_bubble_content {
            padding: 8px 10px;
            line-height: 180%;
        }

        .imgcircle {
            border-radius: 50%;
        }

        .IconTd:hover {
            color: #37CAB9;
        }

        .nodeCss {
            font-size: 12px;
            overflow: hidden;
            height: 22px;
        }

        .nodeCss:hover {
            height: auto;
            color: #37CAB9;
        }

        .BMapLabel {
            max-width: none;
        }

        .IconHide {
            color: lightgray;
        }

        .IconHide:hover {
            color: lightgray;
        }
    </style>
</head>

<body>
    <!-- <form method="post" action="./BaiDuMap.aspx" id="form1"> -->
        <!-- <div class="aspNetHidden">
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjc4MjY0ODcwZGQgoZhOW/A7xdGZAyh1qjMHzhymoOjXlmxu2W4nnyMaeg=="
            />
        </div> -->

        <!-- <div class="aspNetHidden">

            <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="AAC9D2F7" />
        </div> -->
        <!-- 导航 -->
        <!-- <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>信息发布</cite>
                </a>
            </span>
        </div> -->
        <div id="mapDiv" style="width: 100%; height: 100vh;"></div>

        <div style="position: absolute; font-size: 14px; top: 20px; right: 20px; padding: 0 15px; background-color: white; border: 1px solid #f5f5f5; border-radius: 10px;">
            <!-- <table style="width: 100%; height: 40px;" id="jczd">
                <tr>
                    <td style="width: 22px;">
                        <img src="http://www.hoire.cn/EMS/Manager/leafletjs/images/jczd.png?a=6" style="height: 25px;" />
                    </td>
                    <td class="IconTd" onclick="toggleIcon(this,2)" onmouseover="SetAnimation(true,2)" onmouseout="SetAnimation(false,2)">监测终端
                        <span id="span_jczd_count" class="text-primary"></span>
                    </td>
                </tr>
            </table> -->



            <table style="width: 100%; height: 40px;" class="IconTable" id="qxz">
                <tr>
                    <td style="width: 22px;">
                        <img src="{% static 'imgs/qxz.png'%}" style="height: 25px; margin-top: -4px;" />
                    </td>
                    <td class="IconTd" onclick="toggleIcon(this,5)" onmouseover="SetAnimation(true,3)" onmouseout="SetAnimation(false,3)">气象站
                        <span id="span_qxz_count" class="text-primary">(3)</span>
                    </td>
                </tr>
            </table>

            <table style="width: 100%; height: 40px;" class="IconTable" id="kzzd">
                <tr>
                    <td style="width: 22px;">
                        <img src="{% static 'imgs/kzzd.png'%}" style="height: 25px; margin-top: -4px;" />
                    </td>
                    <td class="IconTd" onclick="toggleIcon(this,1)" onmouseover="SetAnimation(true,1)" onmouseout="SetAnimation(false,1)">控制终端
                        <span id="span_kzzd_count" class="text-primary"></span>
                    </td>
                </tr>
            </table>

            <table style="width: 100%; height: 40px;" class="IconTable" id="sxt">
                <tr>
                    <td style="width: 22px;">
                        <img src="{% static 'imgs/sxt.png'%}" style="height: 25px; margin-top: -4px;" />
                    </td>
                    <td class="IconTd" onclick="toggleIcon(this,6)" onmouseover="SetAnimation(true,4)" onmouseout="SetAnimation(false,4)">摄像头
                        <span id="span_sxt_count" class="text-primary"></span>
                    </td>
                </tr>
            </table>
            <!-- <table style="width: 100%; height: 40px;" class="IconTable" id="lamp">
                <tr>
                    <td style="width: 22px;">
                        <img src="http://www.hoire.cn/EMS/Manager/leafletjs/images/jczd.png?a=6" style="height: 25px; margin-top: -4px;" />
                    </td>
                    <td class="IconTd" onclick="toggleIcon(this,6)" onmouseover="SetAnimation(true,6)" onmouseout="SetAnimation(false,6)">杀虫灯
                        <span id="span_lamp_count" class="text-primary"></span>
                    </td>
                </tr>
            </table> -->

            <!-- <div style="text-align: center; cursor: pointer; display: none;" onclick="IconToggle()">
                <span class="glyphicon glyphicon-menu-up" id="span_IconToggle"></span>
            </div> -->
        </div>

        <div style="position: absolute; bottom: 20px; right: 20px; width: 27px; font-size: 12px;">
            <div id="mapControl_type" title="切换图层" onclick="mapTypeChangeBtnClick()" style="width: 27px; height: 27px; line-height: 27px; text-align: center; background-color: white; margin-bottom: 3px; cursor: pointer;">
                2D
            </div>

            <div onclick="resizemap()" title="重置地图" style="width: 27px; height: 27px; line-height: 27px; text-align: center; background-color: white; margin-bottom: 3px; cursor: pointer;">
                <img src="http://www.hoire.cn/EMS/Manager/images/mapControlResize.png" />
            </div>

            <div onclick="mapZoomIn()" title="放大" style="width: 27px; height: 28px; font-size: 18px; line-height: 27px; text-align: center; background-color: white; border-bottom: 1px solid #cccccc; cursor: pointer;">
                +
            </div>
            <div onclick="mapZoomOut()" title="缩小" style="width: 27px; height: 27px; font-size: 24px; line-height: 27px; text-align: center; background-color: white; cursor: pointer;">
                -
            </div>
        </div>

        <div id="mapControl_typeChange" style="display: none; position: absolute; font-size: 12px; width: 50px; line-height: 25px; height: 50px; background-color: #fff; border-radius: 5px; bottom: 86px; right: 60px; padding-left: 10px;">
            <div style="cursor: pointer;" onclick="mapTypeChange('2D')">2D</div>
            <div style="cursor: pointer;" onclick="mapTypeChange('卫星')">卫星</div>
            <div style="position: absolute; bottom: 25px; right: -5px;">
                <img src="http://www.hoire.cn/EMS/Manager/images/mapControleTriggle.png" />
            </div>
        </div>
        <!-- <div style="position: relative">
            <button type="button" onclick="GetZoom();">获取缩放级别</button>
        </div>
        <span id="span_Script"></span> -->
    <!-- </form> -->
</body>

</html>

<script src="{% static '/lib/layui/layui.js'%}"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'upload'], function () {
        var element = layui.element;

        //一些事件监听
        element.on('tab(demo)', function (data) {
            console.log(data);
        });

    });

    // 百度地图API功能
    var map = new BMap.Map("mapDiv", { mapType: BMAP_SATELLITE_MAP, minZoom: 4 });  //BMAP_SATELLITE_MAP  卫星地图

    $("#mapControl_type").html("卫星");

    map.centerAndZoom(new BMap.Point(119.629231,26.112331), 17);

    map.enableScrollWheelZoom(true);

    //气象站标识
    var qxzIcon = new BMap.Icon("{% static 'imgs/qxz.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });

    //气象站标识——断开
    var qxzOffIcon = new BMap.Icon("{% static 'imgs/qxz-Off.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });

    //摄像头标识
    var sxtIcon = new BMap.Icon("{% static 'imgs/sxt.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });

    //摄像头标识——断开
    var sxtOffIcon = new BMap.Icon("{% static 'imgs/sxt-Off.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });

    //摄像头标识——加密
    var sxtEncryptIcon = new BMap.Icon("{% static 'imgs/sxt-Encrypt.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });

    function openInfo(title, content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        //var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
        //map.openInfoWindow(infoWindow, point); //开启信息窗口

        var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: title, //标题 
            panel: "panel", //检索结果面板  
            enableSendToPhone: false,
            enableMessage: false,//设置允许信息窗发送短息 
            searchTypes: []
        });

        searchInfoWindow.open(point);

        var arr = new Array();
        $(".BMapLib_trans").each(function () {
            $(this).attr('src', "../static/imgs/tail.png");
            $(this).css({ "left": "113px", "bottom": "-11px", "top": "inherit", "width": "20px", "height": "11px" });
            //arr.push($(this).attr("src"));
        });
    }

    function openMarkInfo(marker, content) {
        var p = marker.getPosition();
        var point = new BMap.Point(p.lng, p.lat);
        //var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
        //map.openInfoWindow(infoWindow, point); //开启信息窗口


        var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, content, {
            title: "监测终端", //标题 
            panel: "panel", //检索结果面板  
            enableSendToPhone: false,
            enableMessage: false,//设置允许信息窗发送短息 
            searchTypes: []
        });

        searchInfoWindow3.open(point);

        var arr = new Array();
        $(".BMapLib_trans").each(function () {
            $(this).attr('src', "{% static 'imgs/tail.png'%}");
            $(this).css({ "left": "113px", "top": top, "width": "20px", "height": "11px" });
            //arr.push($(this).attr("src"));
        });
    }



    var BasePolygonArray = [];//基地划分
    var BaseIDArray = [];

    function addEventListener(theType, polygon) {

        if (theType == 'polygon') {
            var fillOpacity = polygon.getFillOpacity();

            polygon.addEventListener("mouseover", function (e) {
                for (var i = 0; i < BasePolygonArray.length; i++) {
                    if (BasePolygonArray[i] == polygon) {

                        var BaseID = BaseIDArray[i];

                        for (var j = 0; j < BaseIDArray.length; j++) {

                            if (BaseIDArray[j] == BaseID)
                                BasePolygonArray[j].setFillOpacity(fillOpacity + 0.2);
                        }


                        break;
                    }
                }
                polygon.setFillOpacity(fillOpacity + 0.2);
            });
            polygon.addEventListener("mouseout", function (e) {
                //polygon.setFillOpacity(fillOpacity);

                for (var i = 0; i < BasePolygonArray.length; i++) {
                    BasePolygonArray[i].setFillOpacity(fillOpacity);
                }
            });


        }
        else if (theType == 'polyline') {

            var strokeWeight = polygon.getStrokeWeight();

            polygon.addEventListener("mouseover", function (e) { polygon.setStrokeWeight(strokeWeight + 2) });
            polygon.addEventListener("mouseout", function (e) { polygon.setStrokeWeight(strokeWeight) });
        }

    }

    function addOpenInfoEventHandler(x, y, title, content, obj) {

        obj.addEventListener("onclick", function (e) {

            // $(".BMapLabel").css({"display":"none"});

            openInfoByXY(title, content, x, y);
            // ShowPoint(x, y);
        }
        );

    }

    var searchInfoWindow;
    function openInfoByXY(title, content, lng, lat) {


        var point = new BMap.Point(lng, lat);
        //var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
        //map.openInfoWindow(infoWindow, point); //开启信息窗口

        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: title, //标题 
            panel: "panel", //检索结果面板  
            enableSendToPhone: false,
            enableMessage: false,//设置允许信息窗发送短息 
            searchTypes: []
        });



        setTimeout(
            function () {
                searchInfoWindow.open(point);
                var arr = new Array();
                $(".BMapLib_trans").each(function () {
                    $(this).attr('src', "../static/imgs/tail.png");
                    $(this).css({ "left": "113px", "top": top, "width": "20px", "height": "11px" });
                    //arr.push($(this).attr("src"));
                });
            }, 100);
    }



    map.addEventListener("zoomend", function () {
        mapZoomChange();
    });

    function mapZoomChange() {
        var zoomLevel = map.getZoom();
        //console.log (zoomLevel); 
        var allOverlay = map.getOverlays();
        if (zoomLevel >= 17) {//放大级别大于17，显示基地名称
            $(".span_baseName").show();
        } else {
            $(".span_baseName").hide();
        }

        if (zoomLevel <= 14 && map.getMapType().getName() == "卫星")
            map.setMapType(BMAP_HYBRID_MAP);
        if (zoomLevel > 14 && map.getMapType().getName() == "混合")
            map.setMapType(BMAP_SATELLITE_MAP);

        SetGroundOverlayShowOrHide();

        //if(zoomLevel >= 15) { //级别大于15，显示设备图标
        //    $(".BMap_Marker").show();
        //} else { 
        //    $(".BMap_Marker").hide();
        //}
    }


    function getCenterPoint(path) {

        var x = 0.0;
        var y = 0.0;
        for (var i = 0; i < path.length; i++) {
            x = x + parseFloat(path[i].lng);
            y = y + parseFloat(path[i].lat);
        }
        x = x / path.length;
        y = y / path.length;


        return new BMap.Point(x, y);

    }

    function remove_overlay() {
        map.clearOverlays();
    }


    function centerAndZoom(x, y) {
        var point = new BMap.Point(x, y);
        map.centerAndZoom(point, 18);
    }

    function GetZoom() {
        alert(map.getZoom());
    }

    function ShowPoint(x, y) {
        alert(x + ";" + y);
    }

    var idx = 0;
    var isStart = false;

    function openPopup() {

        if (isStart) {
            openMarkInfo(markArray[idx], contentArray[idx]);

            showBaseInfo(baseIdArray[idx], nodeIdArray[idx]);

            idx += 1;

            if (idx >= markArray.length)
                idx = 0;
        }
    }


    function StartOrStop() {
        isStart = !isStart;

        if (isStart) {
            openPopup();
            mytime = setInterval(function () { openPopup() }, 10 * 1000);
        }
        else
            clearInterval(mytime);
    }

    var WeatherstationMarker = [];//气象站
    var CameraMarker = [];//摄像头

    //监测数据
    function GetMonitorMark(ShowStatus) {
        var data = {
            "Status": true,
            "list": [{
                "id": "1_658",
                "markType":6,
                "title": "控制终端",
                "theName": "控制终端",
                "isRun": true,
                "lng": "119.62341",
                "lat": "26.111877",
                "content": "科技",
            }, {
                "id": "3_1174",
                "markType": 5,
                "title": "气象站",
                "theName": "扬尘监测系统",
                "isRun": true,
                "lng": "119.629914",
                "lat": "26.11165",
                "content": "扬尘监测系统(2019-08-03 10:03)&nbsp;<a class='text-success'  href='http://www.hoire.cn/ems/Manager/DataMonitoring/HistoryDataList.aspx?baseID=651' target='_blank' title='趋势分析'><i class='fa fa-line-chart'  style='font-weight:bold;' aria-hidden='true'></i></a><div style='font-size:12px;'><span style='float:left;text-align:center;margin:5px;' title='空气温度'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984335133026206.png' style='height:25px;'/><br/><span style=''>30.8℃</span></span><span style='float:left;text-align:center;margin:5px;' title='空气湿度'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984335713465780.png' style='height:25px;'/><br/><span style=''>57.9%</span></span><span style='float:left;text-align:center;margin:5px;' title='PM2.5'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984336867958340.png' style='height:25px;'/><br/><span style=''>3.1μg/m3</span></span><span style='float:left;text-align:center;margin:5px;' title='PM10'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984337085497037.png' style='height:25px;'/><br/><span style=''>3.4μg/m3</span></span><span style='float:left;text-align:center;margin:5px;' title='光照强度'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984337760714323.png' style='height:25px;'/><br/><span style=''>1Lx</span></span><span style='float:left;text-align:center;margin:5px;' title='噪音'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984357158182421.png' style='height:25px;'/><br/><span style=''>49.6dB</span></span></div>"
            }]
        }

        ClearAllMarker();

        WeatherstationMarker = [];//气象站
        CameraMarker = [];//摄像头

        var jsonObj = data;

        if (jsonObj != null) {

            if (jsonObj.Status) {

                if (jsonObj.list.length > 0) {
                    $("#jczd").hide();
                    $("#qxz").hide();
                    $("#kzzd").hide();
                    $("#sxt").hide();
                    $("#lamp").hide();
                }

                var jczd_count = 0;

                for (var i = 0; i < jsonObj.list.length; i++) {
                    var markObj = jsonObj.list[i];

                    var id = markObj.id;
                    var markType = markObj.markType;
                    var title = markObj.title;
                    var theName = markObj.EquipmentName;
                    var lng = markObj.lng;
                    var lat = markObj.lat;
                    var content = markObj.content;
                    var isRun = markObj.isRun;

                    var icon = GetMarkerIcon(markType, isRun);

                    var marker;

                    if (markType == "1") { //控制终端
                        var ControlPanelId = markObj.ControlPanelId;
                        marker = createControlMarker(lng, lat, icon, title, ControlPanelId);
                    }
                    else if (markType == "6") {   //监控
                        var DeviceSerial = markObj.DeviceSerial;
                        var CameraNo = markObj.CameraNo;
                        marker = createCameraMarker(lng, lat, icon, title, DeviceSerial, CameraNo);
                    }
                    else
                        marker = createMarker(lng, lat, icon, title, content);

                    map.addOverlay(marker);

                    switch (markType) {
                      
                        case 5:
                            WeatherstationMarker.push(marker);
                            $("#qxz").show();
                            break;
                        case 1:
                            ControlMarker.push(marker);
                            $("#kzzd").show();
                            break;
                        case 6:
                            CameraMarker.push(marker);
                            $("#sxt").show();
                            break;
                    }
                }

               
                setEquipmentCount("span_qxz_count", WeatherstationMarker.length);
                setEquipmentCount("span_sxt_count", CameraMarker.length);
            }
        }
    }

    function setEquipmentCount(objId, count) {
        if (count > 0)
            $("#" + objId).html("(" + count + ")");
        else
            $("#" + objId).html("");
    }


    //将创建marker的方法抽出来，否则的话总是打开最后一个InfoWindow
    function createMarker(lng, lat, icon, title, content) {

        var markerx = new BMap.Marker(new BMap.Point(lng, lat), { icon: icon });
        markerx.addEventListener("click", function (e) {
            openInfo(title, content, e);
        });
        return markerx;
    }
    function createControlMarker(lng, lat, icon, title, ControlPanelId) {

        var markerx = new BMap.Marker(new BMap.Point(lng, lat), { icon: icon });
        markerx.addEventListener("click", function (e) {
            parent.showControlPanel(ControlPanelId, title);
        });
        return markerx;
    }
    function createCameraMarker(lng, lat, icon, title, DeviceSerial, CameraNo) {

        var markerx = new BMap.Marker(new BMap.Point(lng, lat), { icon: icon });
        markerx.addEventListener("click", function (e) {
            // parent.showCamera(DeviceSerial, CameraNo, title);
            layui.use(['layer'], function () {
                layer.open({
                type: 2, 
                area: ['1200px', '600px'],
                content: 'jkview' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                }); 
            })
        });
        return markerx;
    }

    function GetMarkerIcon(markType, isRun) {
        var icon = qxzIcon;

        switch (markType) {
            case 5:
                if (isRun)
                    icon = qxzIcon;
                else
                    icon = qxzOffIcon;
                break;
            case 6:
                if (isRun)
                    icon = sxtIcon;
                else
                    icon = sxtOffIcon;
                break;
        }

        return icon;
    }

    function toggleIcon(obj, markType) {
        var IconShow = false;

        if ($(obj).hasClass("IconHide")) {
            IconShow = true;
            $(obj).removeClass("IconHide");
        }
        else {
            IconShow = false;
            $(obj).addClass("IconHide");
        }

        var pointArray;

        switch (markType) {
            case 5:
                pointArray = WeatherstationMarker;
                break;
            case 6:
                pointArray = CameraMarker;
                break;
        }

        for (var i = 0; i < pointArray.length; i++) {
            var marker = pointArray[i];
            if (IconShow) {
                var marker = pointArray[i];
                //map.addOverlay(marker); 
                marker.show();
            }
            else {
                var marker = pointArray[i];
                // map.removeOverlay(marker); 
                marker.hide();
            }
        }
    }

    function SetAnimation(opFlag, markType) {

        var pointArray;

        switch (markType) {
            case 2:
                pointArray = MonitorMarker;

                if (opFlag)
                    $(".div_MonitorCount").hide();
                else
                    $(".div_MonitorCount").show();
                break;
            case 5:
                pointArray = GatewayMarker;
                break;
            case 6:
                pointArray = LampMarker;
                break;
        }

        for (var i = 0; i < pointArray.length; i++) {
            var marker = pointArray[i];
            if (opFlag) {
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

            }
            else {
                marker.setAnimation(null);
            }
        }
    }


    $(function () {
        GetMonitorMark(1);
        // setTimeout(function () { GetMonitorMark(1); }, 1000 * 2 );
        // setInterval(function () { GetMonitorMark(1); }, 1000 *60* 10);
    });

    function ClearAllMarker() { 
        ClearMarker(WeatherstationMarker);
        ClearMarker(CameraMarker);
    }

    function ClearMarker(pointArray) {
        for (var i = 0; i < pointArray.length; i++) {
            var marker = pointArray[i];
            map.removeOverlay(marker);
        }
    }

    function showBaseInfo(baseId, nodeId) {
        parent.showBaseInfo(baseId, nodeId);
    }

    function showCamera(deviceSerial, cameraNo, TheName) {
        parent.showCamera(deviceSerial, cameraNo, TheName);
    }



    function resizemap() {
        //map.setCity("中国");
        map.centerAndZoom(new BMap.Point(119.629231,26.112331), 17);
    }

    function mapZoomIn() {
        map.setZoom(map.getZoom() + 1);
    }

    function mapZoomOut() {
        map.setZoom(map.getZoom() - 1);
    }

    function mapTypeChangeBtnClick() {
        $("#mapControl_typeChange").toggle();
    }

    function mapTypeChange(maptype) {
        if (maptype == '2D') {
            map.setMapType(BMAP_NORMAL_MAP);
            // $.post("../../../Ashx/UserIndex/ShowMapTypeSet.ashx", { mapTypeLayerSet: true, mapType: 1 }, function (data) { });
        }
        else {
            map.setMapType(BMAP_SATELLITE_MAP);
            // $.post("../../../Ashx/UserIndex/ShowMapTypeSet.ashx", { mapTypeLayerSet: true, mapType: 2 }, function (data) { });
            mapZoomChange();
        }

        SetGroundOverlayShowOrHide();

        $("#mapControl_type").html(maptype);

        $("#mapControl_typeChange").hide();


    }

    function IconToggle() {
        $(".IconTable").toggle();

        if ($(".IconTable").is(':hidden'))
            $("#span_IconToggle").attr("class", "glyphicon glyphicon-menu-down");
        else
            $("#span_IconToggle").attr("class", "glyphicon glyphicon-menu-up");
    }

    function SetCoordinate(e) {

        console.log(e.point.lng + "," + e.point.lat);
    }

    map.addEventListener("click", SetCoordinate);

    var groundOverlay = null;
    var displayOnMinLevel;
    var displayOnMaxLevel;


    // 西南角和东北角
    // var SW = new BMap.Point(113.35332700000009, 23.113465840000003);
    // var NE = new BMap.Point(113.52293299999987, 23.208124159999983);
    var SW = new BMap.Point(119.618595,26.106232);
    var NE = new BMap.Point(119.636202,26.115251);
    var displayOnMinLevel = 10;
    var displayOnMaxLevel = 19;

    var groundOverlayOptions = {
        opacity: 1,
        displayOnMinLevel: 10,
        displayOnMaxLevel: 19
    }

    // 初始化GroundOverlay
    groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);

    // 设置GroundOverlay的图片地址
    groundOverlay.setImageURL('http://www.hoire.cn/EMS/UploadFile/BaseMap/637001672190877712.png');

    //叠加图片到百度地图
    SetGroundOverlayShowOrHide();

    function SetGroundOverlayShowOrHide() {

        if (groundOverlay != null) {
            if (map.getMapType().getName() == "地图")//2D地图
                map.removeOverlay(groundOverlay);
            else {
                var zoomLevel = map.getZoom();

                if (zoomLevel >= displayOnMinLevel && zoomLevel <= displayOnMaxLevel) {
                    map.addOverlay(groundOverlay);

                    if (map.getMapType().getName() == "卫星")
                        map.setMapType(BMAP_HYBRID_MAP);
                }
                else
                    map.removeOverlay(groundOverlay);
            }
        }
    }

    var one = true;
    function tilesloaded() {
        if (one) {
            $("#mapDiv > div:eq(0) > div:eq(1) > div:eq(3)").css("z-index", "200");
            $("#mapDiv > div:eq(0) > div:eq(1) > div:eq(3) > div:eq(0)").css("z-index", "-9999999");
            one = false;
            console.log('ok');
        }
    }
    map.addEventListener('tilesloaded', tilesloaded)

</script>