Javascript 在Dojo中创建Google地图界面
我正在尝试使用ArcGIS 2.1 JS API创建一个类似于Google地图的自定义界面 Dojo的布局方案让我特别困惑的是,Google Maps有一个地图窗格,可以扩展页面的整个宽度,还有一个左侧的搜索结果面板,似乎漂浮在地图窗格上方 就Dojo布局而言,这是如何工作的?我曾沮丧地使用BorderContainers,并查看了浮动窗格的文档,但毫无结果Javascript 在Dojo中创建Google地图界面,javascript,dojo,maps,gis,arcgis,Javascript,Dojo,Maps,Gis,Arcgis,我正在尝试使用ArcGIS 2.1 JS API创建一个类似于Google地图的自定义界面 Dojo的布局方案让我特别困惑的是,Google Maps有一个地图窗格,可以扩展页面的整个宽度,还有一个左侧的搜索结果面板,似乎漂浮在地图窗格上方 就Dojo布局而言,这是如何工作的?我曾沮丧地使用BorderContainers,并查看了浮动窗格的文档,但毫无结果 欢迎提供任何指导。不确定您遇到了什么问题-无论是故障排除还是设计,但下面是一个可能有效的刚性构造示例: <html> <
欢迎提供任何指导。不确定您遇到了什么问题-无论是故障排除还是设计,但下面是一个可能有效的刚性构造示例:
<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窗格和其他小控件,但从技术上讲,这应该是可行的,并且看起来像:
不确定您遇到了什么问题-故障排除或设计,但下面是一个可能有效的刚性构造示例:
<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窗格和其他小控件,但从技术上讲,这应该是可行的,并且看起来像:
或者,您也可以使用用于谷歌地图的ArcGIS扩展:
或者,您也可以使用用于谷歌地图的ArcGIS扩展: 哦,哇。我从来不知道splitter参数存在。虽然这不是我想要的,但它会的。哦,哇。我从来不知道splitter参数存在。虽然这不是我想要的,但也可以。