2010-10-04 70 views
1

我正在嘗試使用ArcGIS 2.1 JS API創建一個類似於Google Maps的自定義界面。在Dojo中創建Google Maps界面

什麼令我困惑(尤其是Dojo的佈局方案),Google地圖有一個地圖窗格可以擴展整個頁面寬度,並且左側的搜索結果面板似乎在地圖窗格上方浮動。

這是如何在Dojo佈局方面工作的?我有令人沮喪的工作與BorderContainers,並無濟於事地看着FloatingPane的文檔。

任何方向表示讚賞。

回答

4

不知道你正在運行的問題到 - 無論故障或設計,但是,這裏是可能的工作剛性結構例如:

<html> 

<head> 
<title>dojo/google map example</title> 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/resources/dojo.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/claro/claro.css" type="text/css" media="all" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script djConfig="parseOnLoad:true" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script> 

<script type="text/javascript"> 
dojo.require("dijit.layout.BorderContainer"); 
dojo.require("dijit.layout.ContentPane"); 
dojo.addOnLoad(function() { 
    var myLatlng = new google.maps.LatLng(38.887, -77.016); 
    var myOptions = { 
     zoom: 13, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"Hello World!" 
    }); 
}); 
</script> 

</head> 

<body class="claro" style="height:100%;padding:0;margin:0; overflow:hidden"> 


<div dojoType="dijit.layout.BorderContainer" style="height:100%"> 
    <div dojoType="dijit.layout.ContentPane" region="left" splitter="true" style="width:200px"> 
     Left search thing 
    </div> 
    <div dojoType="dijit.layout.ContentPane" region="top" style="height:100px"> 
     Top 
    </div> 
    <div dojoType="dijit.layout.ContentPane" region="center" style="overflow:hidden"> 

     <div id="map_canvas" style="height:100%; width:100%"></div> 

    </div> 
</div> 

</body> 

</html> 

可以替代的expando窗格成分,和其他小玩意兒,但這應該在技術上合作,並期待這樣的:

http://imgur.com/ASlGG.png

+0

哦,哇。我從來不知道'splitter'參數甚至存在。雖然這不是我正在尋找的,但它會。 – danyim 2010-10-06 20:31:44

+0

哇,謝謝這看起來很好:) – nXqd 2011-10-18 08:33:52