在 Dojo 中创建 Google 地图的界面答案

【问题标题】：Creating Google Maps' interface in Dojo在 Dojo 中创建 Google 地图的界面
【发布时间】：2023-03-26 11:20:01
【问题描述】：

我正在尝试使用 ArcGIS 2.1 JS API 创建一个类似于 Google 地图的自定义界面。

让我感到困惑的是（尤其是 Dojo 的布局方案），Google 地图有一个扩展整个页面宽度的地图窗格，以及一个似乎漂浮在地图窗格上方的左侧搜索结果面板。

这在 Dojo 布局方面是如何工作的？我与 BorderContainers 合作令人沮丧，并查看了 FloatingPane 的文档但无济于事。

感谢任何方向。

【问题讨论】：

标签： javascript dojo maps gis arcgis

【解决方案1】：

不确定您遇到了什么问题 - 故障排除或设计，但是，这是一个可能有效的刚性构造示例：

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

您可以用组件替换扩展窗格和其他小玩意儿，但这在技术上应该可以工作并且看起来像：

http://imgur.com/ASlGG.png

【讨论】：

哦，哇。我从来不知道splitter 参数甚至存在。虽然这不是我想要的，但它会做的。

【解决方案2】：

或者您可以只使用 Google Maps 的 ArcGIS Extension :)

http://resources.esri.com/arcgisserver/apis/javascript/gmaps/

【讨论】：