Создание интерфейса Google Maps в Dojo

Я пытаюсь использовать API-интерфейс ArcGIS 2.1 для создания настраиваемого интерфейса, который похож на Google Maps.Создание интерфейса Google Maps в Dojo

Что меня смущает (в частности, с схемой компоновки Dojo), то, как Google Maps имеет панель карты, которая расширяет всю ширину страницы и имеет панель результатов левого поиска, которая, кажется, плавает над панелью карты.

Как это работает с точки зрения компоновки Dojo? Я разочарованно работал с BorderContainers и посмотрел документацию на FloatingPane безрезультатно.

Любое направление приветствуется.

источник

2010-10-04 danyim

Не уверен, что проблема, которую вы бежите в - либо устранения неполадок или дизайн, но, вот жесткий пример конструкции, которая могла бы работать:

<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

источник

2010-10-04 21:46:53 pp19dd

О, ничего себе. Я никогда не знал, что параметр 'splitter' даже существовал. Хотя это не совсем то, что я ищу, это будет сделано. – danyim

wow, спасибо, это выглядит очень приятно :) – nXqd