html tree&map

最新推荐文章于 2024-09-02 17:34:07 发布

chunzhenruan2595

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3428739/blog/1546579

版权

<!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 οnclick="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 οnclick="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>

</div>
     <div class="second">
    <div class="map" id="moboxmap"></div>
    <div class="table" id="moboxtable"></div>
</div>

</body>
</html>

转载于:https://my.oschina.net/u/3428739/blog/1546579

chunzhenruan2595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html tree&map

<!DOCTYPE html> <html style="height:100%;width:100%"> <head lang="en"> <meta charset="UTF-8"> <title>&l...
复制链接

扫一扫