地图中html元素的使用
来源：互联网 发布：linux apache启动失败 编辑：程序博客网 时间：2024/06/06 05:45
在地图中，不管是工具栏、工具按钮还是弹出框，都是浮在地图上的一个个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 ：
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
效果如下：
0 0
- 地图中html元素的使用
- HTML中frameset元素的使用
- HTML中元素的作用
- 在字符串资源文件中添加HTML元素，直接使用字符串资源，HTML元素没起作用的解决办法
- html之百度地图接口的使用
- html元素的父子关系的使用
- HTML中不支持静态Expando的元素
- HTML中不支持静态Expando的元素
- HTML文件中元素的加载顺序
- 获得html中鼠标下的元素
- PHP中特殊HTML元素的转换
- HTML中td元素的nowrap属性
- html中元素与标签的区别
- 合并html中某个元素的样式
- html中组织内容的元素总结
- html中嵌入内容的元素总结
- 访问HTML中元素的方法
- html中元素的隐藏和显示
- S5PV210系列（裸机三）ARM体系结构与汇编指令
- 编写一个程序求解字谜游戏问题
- BufferedReader、BufferedWriter等流类对文件进行操作
- Git常用命令
- Random使用的坑
- 地图中html元素的使用
- JS学习之五---高阶函数
- 补c++第二次试验
- MATLAB学习笔记之-----变量的保存与清除
- 设计模式复习
- Discuz!论坛教程之设置帖子被收藏后自动提升主题
- 并发：volatile(转)
- FastReport中如何加入自定义函数
- Apache log4net™ Config Examples
