地図サンプルコード

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

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

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

サンプルのプレビュー

現在地は

緯度：
経度：

サンプルコード

※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【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 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_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>

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

目次