[地圖SkyLine二次開發]框架(3)

時間 2019-12-02

標籤地圖 skyline 二次開發框架简体版

原文原文鏈接

上節將顯示咱們地圖的OBJECT控件，布了一下局，但地圖沒有進行加載。javascript

這是由於咱們要在另外一個頁面，對OBJECT控件進行地圖加載，而且獲得該控件的sgworld，以便對其進行咱們想要的開發。html

這裏，細心的人會說，爲何要在另外一個頁面加載呢？爲何不在OBJECT所在頁面進行加載呢？java

這也是一個比較關鍵性的問題，緣由很簡單，ui

由於Object控件上，放置任何DIV,SPAN,或者其餘控件時，都會被Object控件覆蓋在下面。spa

在網上找了不少辦法，最有效的，並且項目中經常使用到的就是IFRAME方法。xml

1.項目中加上一個HTML頁。htm

2.在Index.cshtml中加入Iframe,而且src指向MenuPage.htmlblog

-z-index將Iframe，放置於Object之上。事件

<body>
    <iframe id = "menuIframe" src="/HTMLPage/MenuPage.html" style="z-index:1;position:absolute; width:400px;height:100%;" ></iframe>
</body>

3.看一下效果。ip

-左-菜單，右-地圖^^

4.設置焦點

-在這又遇到新問題，頁面加載後，當點擊3D窗口控件時，左邊菜單又被蓋到，地圖下面。

解決辦法，設置一個隱藏按鈕，放置在MenuPage.html裏，在任何狀況下，將焦點設置在該按鈕上，這個問題就能夠解決了。

加載的時候，聚一次焦，加上一個文檔OnClick事件，當每次點擊本文檔時，都要聚焦一次。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function Load() {
            document.getElementById('btnhidden').focus();    //加載時，設置焦點
            if (document.all) {
                window.document.onclick = new Function("return onClick(event);"); //當點擊MenuPage.html時，再次聚焦
            } else {
                window.document.body.setAttribute("onclick", "return onClick(event);");
            }
        }
        function onClick(ev) {
            ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if (target && target.id && target.id == "PanelBox") {
            }
            else {
                if (target.tagName == 'INPUT') {
                    if (target.role == 'checkbox') {
                        document.getElementById('btnhidden').focus();    //當點擊checkbox的時候，再次聚焦
                    }
                }
                else { document.getElementById('btnhidden').focus(); }
            }
        }
    </script>
</head>
<body onload="Load()" onclick="MyFocus()">
    <input type="button"  style="width:40px;z-index:-2;position:absolute;top:0px;left:0px;filter:alpha(opacity=0);" id="btnhidden" />
</body>
</html>

*這個時候咱們發現，咱們點擊網頁上任何地方的時候，菜單頁都不會被蓋在地圖下。

5.結束語

-這一節，咱們征服了，任何HTML控件都不能放在OBJECT控件之上的霸道的一面。