Question

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

我正在处理这里看到的dojo示例（Creating Google Maps' interface in Dojo）并修改了代码，以便在新窗格中拥有基本地图的第二个实例。我最终将向两个窗格等添加不同的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>

Answer 1

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

每当Object＃2中的属性发生变化时，Object＃1的有界属性将被设置为Object＃2的属性。

Maps-instances是MVCObjects，所以你要做的就是将zoom的{{1}}和center绑定到map和zoom center 1}}：

map1

注意：脚本中存在语法错误，请删除末尾的map.bindTo('center',map1,'center'); map.bindTo('zoom',map1,'zoom');

多个谷歌地图实例与链接缩放/范围

1 个答案: