地图中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)' οnclick="selectPopTag('realtimeGauge',this)">
                    实时表盘</a></li>
                <li class=''><a href='javascript:void(0)' οnclick="selectPopTag('realtimedata',this)">
                    实时数据</a></li>
                <li class=''><a href='javascript:void(0)' οnclick="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

效果如下：