YOLP(地図)

地図上でお絵かきするには

地図上をクリックしていくと、クリックしたところが順々に線もしくは面で結ばれていきます。クリックした点にはアイコンが表示され、クリックすると点を削除し、線もしくは面を結びなおすことができます。線、面のどちらを作成するかはボタンで切り替えることができます。



地図上でお絵かきするには

サンプルのプレビュー


現在地は

  • 緯度:
  • 経度:

サンプルコード

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

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
var points = new Array();
var objType = false;      // ポリライン(false)、ポリゴン(true)。
var followCursor = true;   // 補助線。

window.onload = function() {
   var point0 = new YLLPoint("35.40.39.980, 139.46.13.730");
   ymap = new YahooMapsCtrl("map", point0, 4);

   // 地図をクリックしたときmap_click関数を実行する。
   ymap.addEvent(YEventType.MAP_CLICK, map_click);

   // アイコンクリックしたときicon_click関数を実行する。
   ymap.addEvent(YEventType.ICON_CLICK, icon_click);

   // 地図をスクロールしたときmap_moved関数を実行する。
   ymap.addEvent(YEventType.MAP_MOVED, map_moved);

   // マウスが地図上を移動したときmouse_move関数を実行する。
   event1 = ymap.addEvent(YEventType.MOUSE_MOVE, mouse_move);

   // マウスが地図から外れたときmouse_out関数を実行する。
   ymap.addEvent(YEventType.MOUSE_OUT, mouse_out);

   // 「マウス追従モード切替」ボタンをクリックすると、button1_click関数を実行する。
   document.getElementById("button1").onclick = button1_click;

   // 「ポリゴンモードに変更する」ボタンをクリックすると、button"_click関数を実行する。
   document.getElementById("button2").onclick = button2_click;
}

function button1_click() {
   /**
    *「マウス追従モード切替」ボタンクリック時補助線の描画の有無を設定する。
    * a. followCursorが true のとき。
    *      補助線ありのとき、補助線を作るイベントを削除する。
    * b. followCursorが false のとき。
    *      補助線なしのとき、補助線を作るイベント(YEventType.MOUSE_MOVE)を作成。
    **/
   if (followCursor == true) { 
      followCursor = false;
      ymap.removeEvent(event1);
      ymap.removeVectorObject("making");
   } else {
      followCursor = true;
      event1 = ymap.addEvent(YEventType.MOUSE_MOVE, mouse_move);
   }
}

function button2_click() {
   // 「ポリライン・ポリゴンモード変更」ボタンクリック時。
   // 作成する図形をポリラインまたはポリゴンに切り替える。
   if (objType == false) { 
      objType = true;
   } else {
      objType = false;
   }
}

function map_moved() {
   // 地図スクロール完了時、中心点の緯度経度を表示する。
   document.getElementById("center_lat").value = ymap.getCenter().lat;
   document.getElementById("center_lon").value = ymap.getCenter().lon;
}

function mouse_move(mouse_point) {
   /**
    * 地図上にマウスがあるとき補助線を引く。
    * a. ポリラインモードのとき。
    *         ポリラインの最終点とマウスの位置を変数mpointに格納する。
    * b. ポリゴン(2点以下)モードのとき。
    *       i) 2点以下のとき:
    *         ポリゴンの最終点とマウスの位置を変数mpointに格納する。
    *      ii) 3点以上のとき:
    *         ポリゴンの最終点とマウスの位置、開始点を変数mpointに格納する。
    **/
   var style = { strokeWidth: 5, strokeColor: "CC33CC", strokeOpacity: 1 };

   if (objType == 0 && points.length > 0){
      // ポリラインのとき。
      var mpoint = new Array(mouse_point, points[points.length-1]);
   } else if (objType == 1 && points.length < 2) {
      // ポリゴン(2点以下のとき)。
      var mpoint = new Array(mouse_point, points[points.length-1]);
   } else if (objType == 1 && points.length >= 2) {
      // ポリゴン(3点以上のとき)。
      var mpoint = new Array(points[points.length-1], mouse_point, points[0])
   }
   ymap.addPolyline("making", mpoint, "", style);
}

function mouse_out() {
   // 地図からマウスアウト時、補助線を消す。
   ymap.removeVectorObject("making");
}

function map_click(click_point) {
   /**
    * 地図をクリックしたとき、その地点の緯度経度情報を登録する。
    * 1. クリックした地点の緯度経度をpoints配列の最後尾に追加。
    * 2. クリックした地点にアイコンを配置する。
    * 3. ポリライン(またはポリゴン)を生成する。
    **/
   points.push(click_point);

   draw_icons();

   if (objType == false) {
      draw_lines();
   } else {
      draw_area();
   }
}

function icon_click(id) {
   /**
    * アイコンをクリックしたとき配列から緯度経度情報を削除する。
    * 1. アイコンの持つIDからクリックされたアイコンの情報をpoints配列から削除する。
    * 2. 残った地点にアイコンを再配置する。
    * 3. ポリライン(またはポリゴン)を再描画する。
    **/
   points.splice(id, 1);

   draw_icons();

   if (objType == false){
      draw_lines();
   } else {
      draw_area();
   }
}

function draw_icons(){
   /**
    * アイコンを配置する。
    * 1. 表示しているアイコンをclearIcon()ですべて削除する。
    * 2. points配列に格納されている緯度経度情報を用いて
    *      addIcons()で同時に複数のアイコンを配置する。
    **/
   ymap.clearIcon();
   var icons = new Array();
   for (var i=0; i<points.length; i++){
      var icon = new Object();
      icon.id = i;
      icon.pos = points[i];
      icon.popup = "";
      icon.type = "L1";
      icons.push(icon);
   }
   ymap.addIcons(icons);
}
function draw_lines(){
   /**
    * ポリラインを描画する。
    * 1. 表示している図形をすべて削除する。
    * 2. points配列に格納されている緯度経度情報を用いて
    *     addPolyline()でポリラインを描画する。
    **/
   ymap.clearVectorObject();
   var style = { strokeWidth: 5, strokeColor: "33CC33", strokeOpacity: 1 };
   var popup = "";
   ymap.addPolyline("line", points, popup, style);
}

function draw_area() {
   /**
    * ポリゴンを描画する。
    * 1. 表示している図形をすべて削除する。
    * 2. points配列に格納されている緯度経度情報を用いて
    *      addPolygon()でポリゴンを描画する。
    **/
   ymap.clearVectorObject();
   var style = { strokeWidth: 5, strokeColor: "33CC33", strokeOpacity: 1, fillColor: "000000", fillOpacity: 0.3 };
   var popup = "";
   ymap.addPolygon("area", points, popup, style);
}

</script>
<title>地図上でお絵かきするサンプル</title>
</head>

<body>
<div id="map" style="height: 400px; width: 400px"></div>
<br>
<p>現在地は<br>
<ul>
   <li>緯度:<input type="text" id="center_lat" size="30" style="border-width: 0px">
   <li>経度:<input type="text" id="center_lon" size="30" style="border-width: 0px">
</ul>
</p>
<input type="button" value="マウス追従モード切替" id="button1">
<input type="button" value="ポリライン、ポリゴンモード変更" id="button2">
</body>
</html>