0

有没有办法“链接”多个谷歌地图实例的范围/缩放？

我正在处理此处看到的 dojo 示例（在 Dojo 中创建 Google 地图的界面）并修改了代码，以便在新窗格中拥有第二个基本地图实例。我最终将向两个窗格等添加不同的 kml 信息层，但现在我想找到一种方法来链接两个地图的视图和范围。即在任一地图上执行的任何平移/缩放都将在另一个地图上重现

到目前为止，这是我的代码（对javascript来说很新，所以请温柔！！）

<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 intialize() {
    var myLatlng = new google.maps.LatLng(48,-80.624207);
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions);


  });


});




</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"  style="width:15%">
        Left search thing
    </div>
    <div dojoType="dijit.layout.ContentPane" region="top" style="height:2%">
        Top
    </div>
    <div dojoType="dijit.layout.ContentPane" region="center" style="overflow:hidden" >

        <div id="map_canvas" style="height:100%; width:100%"></div>

    </div>
    <div dojoType="dijit.layout.ContentPane" region="right" style="width:40%" >

        <div id="map_canvas1" style="height:100%; width:100%"></div>

    </div>
</div>

</body>

</html>
4

1 回答 1

1

这很容易。您可以将 MVCObject 的属性绑定到另一个 MVCObject 的属性。

每次 Object#2 中的属性更改时，Object#1 的有界属性将设置为 Object#2 的属性。

Maps-instances 是 MVCObjects，所以您所要做的就是绑定zoomand centerof maptozoom和centerof map1：

map.bindTo('center',map1,'center');
map.bindTo('zoom',map1,'zoom');

注意：您的脚本中存在语法错误，请删除 });末尾的

于 2013-09-27T22:11:58.093 回答