在 Dojo 中创建 Google 地图的界面 [英] Creating Google Maps' interface in Dojo

查看:29
本文介绍了在 Dojo 中创建 Google 地图的界面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

让我感到困惑(尤其是 Dojo 的布局方案)的是,Google 地图的地图窗格扩展了整个页面的宽度,并且左侧的搜索结果面板似乎浮动在地图窗格上方.

这在 Dojo 布局方面是如何工作的?我很沮丧地使用 BorderContainers,查看了 FloatingPane 的文档但无济于事.

感谢任何方向.

解决方案

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

<头><title>道场/谷歌地图示例</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=全部"/><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 type="text/javascript">dojo.require("dijit.layout.BorderContainer");dojo.require("dijit.layout.ContentPane");dojo.addOnLoad( 函数() {var myLatlng = new google.maps.LatLng(38.887, -77.016);var myOptions = {缩放:13,中心:myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP}var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);var 标记 = 新的 google.maps.Marker({位置:myLatlng,地图:地图,标题:世界你好!"});});<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">左搜索的东西

<div dojoType="dijit.layout.ContentPane" region="top" style="height:100px">最佳

<div dojoType="dijit.layout.ContentPane" region="center" style="overflow:hidden"><div id="map_canvas" style="height:100%; width:100%"></div>

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

http://imgur.com/ASlGG.png

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:

http://imgur.com/ASlGG.png

这篇关于在 Dojo 中创建 Google 地图的界面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆