0

複数の Google マップ インスタンスの範囲/ズームを「リンク」する方法はありますか?

私はここにある dojo の例 ( Dojo での Google マップのインターフェースの作成) に取り組んでおり、新しいペインにベース マップの 2 番目のインスタンスを表示するためにコードを変更しました。最終的には、2 つのペインなどにさまざまな kml レイヤーの情報を追加する予定ですが、今のところ、2 つのマップのビューと範囲をリンクする方法を見つけたいと考えています。つまり、いずれかのマップで実行されたパン/ズームは、もう一方のマップで再現されます。

これまでの私のコードです（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