在Dojo中创建Google Maps的界面 [英] Creating Google Maps' interface in Dojo
问题描述
我正在尝试使用ArcGIS 2.1 JS API创建一个与Google地图类似的自定义界面。令人困惑的是我（尤其是Dojo的布局方案） ）是Google Maps的一个地图窗格，它扩展了页面的整个宽度，左侧的搜索结果面板似乎在地图窗格上方浮动。
这是否符合Dojo布局？我非常沮丧地与BorderContainers一起工作，并查看了FloatingPane的文档，无效。
任何方向都是赞赏。
不知道你遇到什么问题 - 故障排除或设计，但这里是一个僵硬的结构示例，可能会起作用：
< html>
< head>
< title> dojo / google map example< / title>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/resources/dojo.csstype = text / cssmedia =all/>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/claro/claro.csstype =text / cssmedia =all/>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script djConfig =parseOnLoad：truetype =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd。 JS>< /脚本>
< 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 =clarostyle =height：100％; padding：0; margin：0; overflow：hidden>
< div dojoType =dijit.layout.BorderContainerstyle =height：100％>
< div dojoType =dijit.layout.ContentPaneregion =leftsplitter =truestyle =width：200px>
左边搜索的东西
< / div>
< div dojoType =dijit.layout.ContentPaneregion =topstyle =height：100px>
顶部
< / div>
< div dojoType =dijit.layout.ContentPaneregion =centerstyle =overflow：hidden>
< div id =map_canvasstyle =height：100％; width：100％>< / div>
< / div>
< / div>
< / body>
< / html>
您可以将组件替换为expando窗格和其他小工具，但这应该在技术上起作用，如下所示：
I am trying to use the ArcGIS 2.1 JS API to create a custom interface that looks similar to Google Maps.
What is confusing me (particularly with Dojo's layout scheme) is how Google Maps has a map pane that extends the whole width of the page and has a left search results panel that seems to be floating above the map pane.
How does this work in terms of Dojo layouts? I have frustratingly worked with BorderContainers and looked at the documentation for a FloatingPane with no avail.
Any direction is appreciated.
Not sure what problem you're running into - either troubleshooting or design, but, here is a rigid construct example that might work:
<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>
You can substitute components for expando panes, and other gizmos, but this should technically work and look like:
这篇关于在Dojo中创建Google Maps的界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://imgur.com/ASlGG.png](\"http://imgur.com/ASlGG.png\"){kind=link}
