地圖中html元素的使用

jiym發表於2017-05-09
地圖HTML

在地圖中，不管是工具欄、工具按鈕還是彈出框，都是浮在地圖上的一個個html元素，對此我們可以使用傳統的html技術來控制這些元素。這裡我總結了自己在地圖中使用過的一些html技術。

使用js或jquery實現tab頁籤切換效果

1.新建html元素，先把tab結構寫好，主要是由li組成的標題塊和div組成的內容塊：

<div id="popup" class="ol-popup">
        <div class="pophead">
            <div id="popup-title" class="popup-title">
            </div>
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        </div>
        <div id="popup-content" class="popup-content">
            <ul id='pop-tags'>
                <li class='selected'><a href='javascript:void(0)' onclick="selectPopTag('realtimeGauge',this)">
                    實時錶盤</a></li>
                <li class=''><a href='javascript:void(0)' onclick="selectPopTag('realtimedata',this)">
                    實時資料</a></li>
                <li class=''><a href='javascript:void(0)' onclick="selectPopTag('realtimecurve',this)">
                    實時曲線</a></li>
            </ul>
            <div class='poptagsItem' id='realtimeGauge'>
                這是實時錶盤頁籤</div>
            <div class='poptagsItem' id='realtimedata' style='display: none;'>
                這是實時資料頁籤</div>
            <div class='poptagsItem' id='realtimecurve' style='display: none;'>
                這是實時曲線頁籤
            </div>
        </div>
    </div>
2.定義元素的css樣式： 

	.ol-popup {
            background-color: #fff;
            box-shadow: 0 0px 4px rgba(0,0,0,0.4);
            border-radius: 0 0 5px 5px;
            min-width: 280px;
            width: 340px;
            height: 210px;
            font-size: 13px;
            font-family: Verdana, Tahoma, Arial, "Helvetica Neue" , Helvetica, Sans-Serif;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: #fff;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {
            border-top-color: #888;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .pophead{
            position: relative;
            width:100%;
            height:30px;
            background-color:rgb(0,153,187);
        }
        .popup-title{
            font:bold 15px sans-serif;
            color: #fff;
            margin-left: 10px;
            line-height: 30px;
        }
        .popup-content
        {
            height: 149px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 3px;
            right: 5px;
            color:#fff !important;
            font-size: 16px;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
        #pop-tags
        {
            list-style: none;
            PADDING-RIGHT: 0px;
            PADDING-LEFT: 0px;
            PADDING-BOTTOM: 0px;
            MARGIN: 0px 0px 0px 10px;
            WIDTH: 300px;
            PADDING-TOP: 2px;
            HEIGHT: 27px;
        }
        #pop-tags li
        {
            background: url(Content/Images/GIS/tagleft.gif) no-repeat left bottom;
            float: left;
            margin-right: 8px;
            list-style-type: none;
            height: 27px;
        }
        #pop-tags li.selected
        {
            BACKGROUND-POSITION: left top;
            MARGIN-TOP: 1px;
        }
        #pop-tags li.selected a {
            BACKGROUND-POSITION: right top;
            COLOR: #000;
            line-height: 30px;
        }
        .poptagsItem
        {
            height: 135px;
            border-top: 1px solid rgb(174, 203, 212);
            background-color: rgb(255, 255, 255);
        }
        #pop-tags li a {
            PADDING-RIGHT: 8px;
            PADDING-LEFT: 8px;
            BACKGROUND: url(Content/Images/GIS/tagright.gif) no-repeat right bottom;
            FLOAT: left;
            PADDING-BOTTOM: 0px;
            COLOR: #69f;
            LINE-HEIGHT: 33px;
            PADDING-TOP: 0px;
            HEIGHT: 27px;
            TEXT-DECORATION: none;
            margin-right:-3px;
        }
        #realtimedata input
        {
            width:34px;
            background-color: #ddd;
        }
附標籤左右邊框的圖片：

tagleft.gif  ：

tagright.gif  ：


3.定義切換事件

js方法：

function selectPopTag(showContent, selfObj) {
        // 操作標籤
        var tag = document.getElementById("pop-tags").getElementsByTagName("li");
        var taglength = tag.length;
        for (i = 0; i < taglength; i++) {
            tag[i].className = "";
        }
        selfObj.parentNode.className = "selected";

        document.getElementById("realtimeGauge").style.display = "none";
        document.getElementById("realtimedata").style.display = "none";
        document.getElementById("realtimecurve").style.display = "none";

        document.getElementById(showContent).style.display = "block";
    }

jquery方法：

function selectPopTag(showContent, selfObj) {
        $("#pop-tags li").removeClass("selected");
        $(selfObj).parent().addClass("selected");
        $(".poptagsItem").hide();
        $("#"+showContent).show();
    }
4.效果：





使用CSS和JS、JQUERY製作地圖導航欄


這裡主要用到：


a.事先定義好元素的類樣式，通過使用js或jquery給元素動態新增類，來改變元素的樣式；移除類，恢復元素的樣式。


b.將導航欄中的按鈕圖片整合到一張png中，然後通過background-position屬性來定位導航按鈕圖片的位置。


步驟：


1.建立html元素




<div class="tool-container">
        <div class="t_close"></div>
        <ul class="toolbarUl">
            <li id="toInitView"><span></span><i>初始檢視</i></li>
            <b></b>
            <li id="tzoomin"><span></span><i>放大</i></li>
            <b></b>
            <li id="tzoomout"><span></span><i>縮小</i></li>
            <b></b>
            <li id="MeasureToolBt"><span></span><i>測量</i><em></em></li>
            <b></b>
            <li id="fullscreenBt"><span></span><i>全屏</i></li>
        </ul>
    </div>


2.建立元素的樣式





 /*自定義工具條樣式*/
    .tool-container{
        background-color:#fff;
        font-family: sans-serif;
        font-style:normal;
        height:40px;
        float:left;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        box-shadow: 1px 2px 1px rgba(0,0,0,.15);
        border: 1px solid #eee;
    }
    .tool-container ul{
        margin:0;
        height:40px;
    }
    .tool-container ul li{
        float: left;
        list-style: none;
        margin-right: 10px;
        line-height: 40px;
        padding:0;
        cursor: pointer;
    }

    .tool-container ul li i{
        float: left;
        font-size: 12px;
        font-style: normal;
        height: 40px;
        line-height: 40px;
        display: inline-block;
    }
    /*定義選單文字hover樣式和active樣式*/
    .tool-container ul li.active i {
        color: #579AFC;
    }
    .tool-container ul li:hover i{
        color: #aaa;
    }
    .tool-container ul li span{
        float:left;
        margin-right: 8px;
        margin-left: 8px;
        margin-top:13px;
        width:16px;
        height:16px;
        background-repeat: no-repeat;
    }
    /*隔離線樣式*/
    .toolbarUl b{
        float: left;
        height: 21px;
        display: inline-block;
        border-right: 1px solid #ddd;
        top: 9px;
        position: relative;
    }
    /*下拉箭頭樣式*/
    .toolbarUl li em{
        width:7px;
        height: 7px;
        float: left;
        margin-top: 16px;
        margin-left: 5px;
        background-repeat: no-repeat;
        background-position: -13px -72px;
    }
    /*下拉箭頭轉為上拉*/
    .toolbarUl li.active em{
        background-position:-13px -96px !important;
    }
    /*定義選單圖片以及各按鈕的圖片位置*/
    .tool-container ul li span,.toolbarUl li em{
        background-image: url("Content/Images/GIS/toolbar.png");
    }
    .tool-container ul #toInitView span
    {
        background-position: -96px -4px;
    }
    .tool-container ul #MeasureToolBt span
    {
        background-position: -235px -4px;
    }
    .tool-container ul #fullscreenBt span
    {
        background-position: -12px -4px;
    }
    .tool-container ul #tzoomin span
    {
        background-position: -263px -5px;
    }
    .tool-container ul #tzoomout span
    {
        background-position: -292px -5px;
    }

    /*定義按鈕圖片的hover樣式，以及點選後active類的樣式*/
    .tool-container ul #toInitView span.active,.tool-container ul #toInitView:hover span
    {
        background-position: -96px -40px;
    }
    .tool-container ul #MeasureToolBt span.active,.tool-container ul #MeasureToolBt:hover span
    {
        background-position: -235px -40px;
    }
    .tool-container ul #fullscreenBt span.active,.tool-container ul #fullscreenBt:hover span
    {
        background-position: -40px -40px;
    }
    .tool-container ul #tzoomin span.active,.tool-container ul #tzoomin:hover span
    {
        background-position: -264px -40px;
    }
    .tool-container ul #tzoomout span.active,.tool-container ul #tzoomout:hover span
    {
        background-position: -293px -40px;
    }
3.為按鈕繫結事件





 $(function() {
        $("#toInitView").click(function () {
            if ($("#toInitView").hasClass("active")) {
                $("#toInitView").removeClass("active");
            } else {
                $("#toInitView").addClass("active");
            }
        })
        $("#MeasureToolBt").click(function () {
            if ($("#MeasureToolBt").hasClass("active")) {
                $("#MeasureToolBt").removeClass("active");
            } else {
                $("#MeasureToolBt").addClass("active");
            }
        })
    })
附選單欄按鈕圖片：toolbar.png





效果如下：











相關文章