将发布的地图，以及源码等嵌入页面

HTML代码：
注意：这里添加图片，需要将 http://localhost:63342/arcgisForJs/写全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一幅地图</title>
    
    <style>
        *{
            margin: 0px;border: 0px;
        }
        .wapper{
            width: 1150px; 
            margin: 0 auto;
            background: cornflowerblue;
        }
        .header{
            height: 30px;background-color: coral;  
            padding-left: 475px;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .catalog{
            height: 125px;background-color: silver;
        }
        .title{
            height: 35px;background-color: turquoise;
        }
        .picture{
            height: 275px;background-color: lightblue;
            overflow: scroll;
            text-align: center;
            /*添加滑动条将地图显示出来，地图太大，并将文本区域居中对齐*/
        }
        .code{
            height: 275px;background-color: greenyellow;
            overflow: scroll;
            /*添加滑动条*/
        }
        .sample{
            height: 275px;background-color:salmon;
        }
        .footer{
            height: 75px;background-color: skyblue;
            margin-top: 5px;
        }
        /*上面设置地图的背景分割*/
        
        ul li{
            padding-top: 25px;
            padding-left: 25px;
            margin-left: 15px;
            list-style: none;
            float: left;
        }
    </style>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        $(function () {
            $("#way02").click(function () {
                
                
                $(".code").html("");
                $(".sample").html("");
                $(".picture").html("");
                $(".title").html("");
                // $(".wapper").html("");这样不会有显示
                //为了第二次点击时，内容不会有重复，跟写数据库查询结果显示的原理是一样的

                
                $(".title").text($(this).text()+"-----"+"http://localhost:63342/arcgisForJs/arcgis/MyFirst.html");
                $(".title").css("text-align","center");
                //通过点击事件，将想要显示的代码显示出来，并且文字居中

                var firstImage = '<img src="http://localhost:63342/arcgisForJs/image/01.PNG">';
                $(firstImage).appendTo(".picture");
                //为picture区域添加图片

                $.ajax({
                    url:'http://localhost:63342/arcgisForJs/arcgis/MyFirst.html',
                    dataType:'text',
                    success:function (data) {
                        var arrstr = data.split(/\r?\n/);
                        //用换行符来分割
                        for(var i=0;i<arrstr.length;i++){
                            var strHi='<P class="row'+i+'"></P>';
                            $(strHi).appendTo(".code");
                            var s = $(".row"+i).text(arrstr[i]);
                        }
                    }
                    //通过字符串的回车进行换行，将换行结果放入p标签的数组，然后放入code里面，完成源码的替换    
                });   
                
                var firstImagIframe = '<iframe id="iframeId" src="MyFirst.html" width="100%" height="100%" frameborder="0"></iframe>';
                $(firstImagIframe).appendTo(".sample");
                //将整个网页添加进sample承载的元素    
            });
        });
    </script>
</head>
<body>
      <div class="wapper">
          <div class="header"><h3>自制Webgis开发示例</h3></div>
          <div class="content">
              <div class="catalog">
                  <div style="overflow:hidden;">
                  <!--定义溢出元素内容区的内容会如何处理-->
                      <ul>
                          <li>发布地图的两种方式：</li>
                          <li><a id="way01" href="javascript:void(0)">API示例</a></li>
                          <li><a id="way02" href="javascript:void(1)">自己发布的地图</a></li>
                      </ul>
                  </div>
              </div>
              <!--添加目录-->
              <div class="title"></div>
              <div class="picture"></div>
              <div class="code"></div>
              <div class="sample"></div>
              <!--添加示例-->
          </div>
          <div class="footer"></div>
      </div>
</body>
</html>
效果：（文件有点大，等一会）
将发布的地图，以及源码等嵌入页面

注意：这里添加图片，需要将 http://localhost:63342/arcgisForJs/写全

猜你喜欢
