YOLP(地図)

2つの地図を連動させるには

大きい地図で詳細な地図、小さい地図で広域の地図を表示し、大きい地図がどこを表示しているのかを小さい地図に表示します。



2つの地図を連動させるには

サンプルのプレビュー

サンプルコード

 ※以下のコードをテキストエディタにコピー&ペーストしてください。
 ※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
var mMove = true;       // メインマップ移動フラグ。
var sMove = true;       // サブマップ移動フラグ。
var mLayer = true;      // メインマップ縮尺変更フラグ。
var sLayer = true;      // サブマップ縮尺変更フラグ。
var main;
var sub;

window.onload = function(){
   var point0 = new YLLPoint("35.40.39.980, 139.46.13.730");
   sub = new YahooMapsCtrl("submap", point0, 5);
   main = new YahooMapsCtrl("mainmap", point0, 3);
   sub.setVisibleCentermark(false);
   sub.setVisibleSliderbar(false);

   main.addEvent(YEventType.MAP_MOVING, main_moving);
   main.addEvent(YEventType.MAP_MOVED, main_moved);
   sub.addEvent(YEventType.MAP_MOVING, sub_moving);
   sub.addEvent(YEventType.MAP_MOVED, sub_moved);

   main.addEvent(YEventType.LAYER_CHANGED, main_layerchange);
   sub.addEvent(YEventType.LAYER_CHANGED, sub_layerchange);
}

function main_moving() {
   // メインマップの移動中は、サブマップにメインマップの位置を示すのみ。
   makeRange();
}

function main_moved() {
   /**
    *   a. メインマップをスクロールしたとき。
    *      1. サブマップ移動フラグをoff(sMove = false)。
    *      2. サブマップを、メインマップの中心点に移動。
    *      3. サブマップにメインマップの現在の表示領域をポリゴンで表示。
    *   b. サブマップに連動してメインマップが移動したとき。
    *      1. サブマップにメインマップの現在の表示領域をポリゴンで表示。
    *      2. メインマップ移動フラグをon。
    **/
   if (mMove == true){
      sMove = false;
      sub.moveTo(main.getCenter());
   }
   makeRange();
   mMove = true;
}

function sub_moving() {
   // サブマップの移動中、サブマップの中心点を表示する。
   sub.setVisibleCentermark(true);
}

function sub_moved() {
   /**
    *   a. サブマップをスクロールしたとき。
    *      1. メインマップ移動フラグをoff(mMove = false)。
    *      2. メインマップを、サブマップの中心点に移動。
    *   b. メインマップに連動してサブマップが移動したとき。
    *      1. サブマップ移動フラグをon。
    **/
   sub.setVisibleCentermark(false);
   if (sMove == true){
      mMove = false;
      main.moveTo(sub.getCenter());
   }
   sMove = true;
}

function makeRange(){
   /**
    * メインマップの表示位置をサブマップにポリゴンで示す。
    *   1. 現在のメインマップの表示領域を取得(getBottomLeft()とgetTopRight()で)。
    *   2. 1の結果を利用して四隅の緯度経度を配列posに順に格納する。
    *   3. サブマップに2の4点を結ぶポリゴンを生成する。
    **/
   var point = new Object();
   point.SW = main.getBottomLeft();
   point.NE = main.getTopRight();

   var pos = new Array();
   pos.push(point.SW);
   pos.push(new YLLPoint(point.NE.lat, point.SW.lon));
   pos.push(point.NE);
   pos.push(new YLLPoint(point.SW.lat, point.NE.lon));

   var style = { strokeWidth: 3, strokeColor: "0000ff", strokeOpacity: 1, fillColor: "0000ff", fillOpacity: 0.3 };
   var popup = "";
   sub.addPolygon("area", pos, popup, style);
}

function main_layerchange() {
   /**
    *   a. メインマップを縮尺変更したとき。
    *      1. サブマップ縮尺変更フラグをoff(sLayer = false)。
    *      2. サブマップを、メインマップの縮尺に変更。
    *   b. サブマップに連動してメインマップが縮尺変更したとき。
    *      1. メインマップ縮尺変更フラグをon。
    **/
   if (mLayer == true) {
      sLayer = false;
      sub.layerTo(main.getCurrentLayer() + 2);
   }
   mLayer = true;
}
function sub_layerchange() {
   /**
    *   a. サブマップを縮尺変更したとき。
    *      1. メインマップ縮尺変更フラグをoff(mLayer = false)。
    *      2. メインマップを、サブマップの縮尺に変更。
    *   b. メインマップに連動してサブマップが縮尺変更したとき。
    *      1. サブマップ縮尺変更フラグをon。
    **/
   if (sLayer == true) {
      mLayer = false;
      main.layerTo(sub.getCurrentLayer() - 2);
   }
   sLayer = true;
}

</script>
<title>2つの地図を連動させるサンプル</title>
</head>
<body>
<div style="position:relative; width:550px; height:550px;">
   <div style="z-index:0">
      <div id="mainmap" style="height: 500px; width: 500px; z-index:0"></div>
   </div>
   <div style="position:absolute; top: 320px; left:320px; z-index:1">
      <div id="submap" style="height: 220px; width: 220px; border:5px solid #fff"></div>
   </div>
</div>
</body>
</html>