html tree&map-优快云博客

本文介绍了一个名为Mobox的监控系统的界面设计，包括使用BMap实现的地图功能、树状菜单结构及其交互逻辑，以及页面布局和样式设置。通过HTML、CSS和JavaScript实现了地图中心定位、标注添加、树节点展开和折叠等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html style="height:100%;width:100%">
<head lang="en">
     <meta charset="UTF-8">

     <title></title>
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>
<script>

var gMoboxMap;

function collapsetree()
{
alert("fdsf");
}
function clickfolder(obj)
{
  //alert(obj.className);

  var point = new BMap.Point(116.404, 39.915);
  gMoboxMap.centerAndZoom(point, 15);
  var marker = new BMap.Marker(point);        // 创建标注
  gMoboxMap.addOverlay(marker);               // 将标注添加到地图中

    if(obj.className == "fa fa-plus-square-o")
    {
     obj.setAttribute("class","fa fa-minus-square-o");
    }
    else
    {
     obj.setAttribute("class","fa fa-plus-square-o");
    }
    var itemp=obj.parentNode;
    if(itemp)
    {
     var itemss=itemp.getElementsByTagName("li");
     var itemlen= itemss.length;
     for(var i=0;i<itemlen;i++)
     {
      if(itemss[i].style.display == "none")
      {
       itemss[i].style.display = "";
      }
      else
      {
       itemss[i].style.display = "none";
      }
     }
    }

}
function moveon(obj)
{
//alert("fdsf");
    obj.style.cursor="default";
   // obj.style.font-weight='900';
   // obj.style.display="block";
// obj.style.border="1px solid #ADADAD";
// obj.style.background="#ADADAD";
// obj.style.width="200px";
    obj.style.color='#00EC00';
   // obj.setAttribute("style","text-decoration:underline");

}
function moveout(obj)
{
//alert("fdsf");
    obj.style.cursor="default";
// obj.style.display="inline";
// obj.style.border="none";
// obj.style.background="#F0F0F0";
    obj.style.color='black';
}

function buildTree()
{

}

window.onload = function()
{
  // map initialization...
  gMoboxMap = new BMap.Map("moboxmap");    // 创建Map实例
  gMoboxMap.centerAndZoom(new BMap.Point(121.5, 31.2), 12); // 初始化地图,设置中心点坐标和地图级别
  gMoboxMap.addControl(new BMap.MapTypeControl());   //添加地图类型控件
  gMoboxMap.setCurrentCity("上海");
  gMoboxMap.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


  //tree inialization...
  buildTree();

}
</script>

</style>
</head>
<body>
<p style="text-align:center; color:#FFFFFF">Mobox Monitor System</p>

    <div class="first" id="moboxgwtree">
    <li><span>  Box List</span>
        <ul style="list-style-type:none">
            <li><span onclick="clickfolder(this)" onMousemove="moveon(this);" onMouseout="moveout(this);" class="fa fa-minus-square-o">   <span class="fa fa-building-o"> Headquater(32/28/4)</span></span>
                <ul style="list-style-type:none">
                    <li class="testli">
     <span onclick="clickfolder(this)" onMousemove="moveon(this);" onMouseout="moveout(this);" class="fa fa-minus-square-o">   <span class="fa fa-sitemap"> G19780001</span></span>
                        <ul style="list-style-type:none">
                            <li><span class="file">File 2.1.1</span></li>
                            <li><span class="file">File 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="folder">Subfolder 2.2</span>
                        <ul>
                            <li><span class="file">File 2.2.1</span></li>
                            <li><span class="file">File 2.2.2</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
                <ul>
                    <li><span class="file">File 3.1</span></li>
                </ul>
            </li>
            <li><span class="file">File 4</span></li>
        </ul>
    </li>
</ul>