Création de l'interface de Google Maps dans Dojo

J'essaie d'utiliser l'API JS ArcGIS 2.1 pour créer une interface personnalisée qui ressemble à Google Maps. Ce qui me trouble (particulièrement avec le schéma de mise en page de Dojo) est de savoir comment Google Maps a un volet de carte qui s'étend sur toute la largeur de la page et un panneau de résultats de recherche qui semble flotter au-dessus du volet.Création de l'interface de Google Maps dans Dojo

Comment cela fonctionne-t-il en termes de disposition de Dojo? J'ai travaillé de manière frustrante avec BorderContainers et regardé la documentation pour un FloatingPane sans succès.

Toute direction est appréciée.

Source

2010-10-04 danyim

Je ne sais pas quel est le problème que vous utilisez dans - soit le dépannage ou la conception, mais voici un exemple de construction rigide qui pourrait fonctionner:

<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>

Vous pouvez remplacer des composants pour vitres expando et d'autres gadgets, mais cela devrait fonctionner sur le plan technique et ressembler à:

http://imgur.com/ASlGG.png

Source

2010-10-04 21:46:53 pp19dd

Oh, wow. Je n'ai jamais su que le paramètre 'splitter' existait. Bien que ce ne soit pas exactement ce que je cherche, ça ira. – danyim

wow, merci cela semble très bien :) – nXqd