ポリライン及びポリゴンをドラッグ可能に設定

ポリラインやポリゴンを地図に表示した後で、ユーザーがマーカーをドラッグして移動させることができるようにする方法を確認します。なおマーカーなどはマーカーそのものをドラッグして移動しますが、ポリラインやポリゴンは構成する各頂点をドラッグして移動します。

ポリライン

まず初期値として設定する場合はPolylineクラスのコンストラクタの2番目の引数で指定するオブジェクトのdraggableプロパティの値として指定して下さい。

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.487511,137.8125), 7);

var linearray = [
  new Y.LatLng(35.69411,139.699402),
  new Y.LatLng(35.160337,136.922607),
  new Y.LatLng(35.005253,135.769043)
];

var line = new Y.Polyline(linearray, {draggable:true});

ymap.addFeature(line);

上記のようにdraggableプロパティの値としてtrueを指定すると、ポリラインの頂点をドラッグして移動させることが可能となります。なおデフォルトの値はfalseとなっているため、明示的に指定しない場合はドラッグできません。

ポリラインを表示後にドラッグ可能かどうか設定する場合はPolylineクラスで用意されているsetDraggableメソッドを使います。

setDraggable(draggable:Boolean)

ポリラインをマウスドラッグにより編集可能にするかどうかを設定します。

Parameters:
  draggable  ドラッグ可能かどうか

1番目の引数にtrueを設定するとドラッグ可能となります。

具体的には次のように記述します

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.487511,137.8125), 7);

var linearray = [
  new Y.LatLng(35.69411,139.699402),
  new Y.LatLng(35.160337,136.922607),
  new Y.LatLng(35.005253,135.769043)
];

var line = new Y.Polyline(linearray);

ymap.addFeature(line);
line.setDraggable(true);

ポリゴン

ポリゴンの場合もポリラインとほぼ同じです。初期値として設定する場合はPolygonクラスのコンストラクタの2番目の引数で指定するオブジェクトのdraggableプロパティの値として指定して下さい。

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.487511,137.8125), 7);

var polygonarray = [
  new Y.LatLng(35.69411,139.699402),
  new Y.LatLng(36.611118,138.218994),
  new Y.LatLng(35.160337,136.922607),
  new Y.LatLng(34.973751,138.394775)
];

var polygon = new Y.Polygon(polygonarray, {draggable:true});

ymap.addFeature(polygon);

上記のようにdraggableプロパティの値としてtrueを指定すると、ポリゴンの頂点をドラッグして移動させることが可能となります。なおデフォルトの値はfalseとなっているため、明示的に指定しない場合はドラッグできません。

ポリゴンを表示後にドラッグ可能かどうか設定する場合はPolygonクラスで用意されているsetDraggableメソッドを使います。

setDraggable(draggable:Boolean)

ポリゴンをマウスドラッグにより編集可能にするかどうかを設定します。

Parameters:
  draggable  ドラッグ可能かどうか

1番目の引数にtrueを設定するとドラッグ可能となります。

具体的には次のように記述します

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.487511,137.8125), 7);

var polygonarray = [
  new Y.LatLng(35.69411,139.699402),
  new Y.LatLng(36.611118,138.218994),
  new Y.LatLng(35.160337,136.922607),
  new Y.LatLng(34.973751,138.394775)
];

var polygon = new Y.Polygon(polygonarray);
polygon.setDraggable(true);

サンプルプログラム

では実際に試してみます。

code4_1.js

window.onload = function() {
  var ymap = new Y.Map("map");
  ymap.drawMap(new Y.LatLng(35.487511,137.8125), 7);

  var linearray = [
    new Y.LatLng(35.69411,139.699402),
    new Y.LatLng(36.611118,138.218994),
    new Y.LatLng(35.160337,136.922607),
    new Y.LatLng(35.005253,135.769043)
  ];

  var line = new Y.Polyline(linearray);

  var polygonarray = [
    new Y.LatLng(34.973751,138.394775),
    new Y.LatLng(37.89653,139.020996),
    new Y.LatLng(36.346103,140.482178)
  ];

  var polygon = new Y.Polygon(polygonarray, {draggable:true});

  ymap.addFeature(line);
  ymap.addFeature(polygon);
  line.setDraggable(true);
}

sample4_1.html

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Yahoo! JavaScriptマップAPI</title>

    <script type="text/javascript" charset="utf-8"
    src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(id)">
    </script>

    <script src="./js/code4_1.js" type="text/javascript"></script>

  </head>
  <body>
    <p>
    JavaScriptマップAPIを使ったサンプルです。
    </p>

    <div id="map" style="width:400px; height:300px"></div>

    <!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
    <a href="http://developer.yahoo.co.jp/about">
    <img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:10px 15px 15px 15px"></a>
    <!-- End Yahoo! JAPAN Web Services Attribution Snippet -->

  </body>
</html>

ブラウザでアクセスすると次のように表示されます。

p4-1

ポリラインとポリゴンを1つずつ表示しています。どちらもドラッグ可能に設定しているため、マウスを合わせると頂点の表示が変わります。

p4-2

移動させたい頂点をマウスでドラッグして移動すると、新しい頂点の位置でポリラインが表示しなおされます。

p4-3

p4-4

今回はポリラインの方で試しましたがポリゴンの場合も同じようにマウスを合わせるとポリゴンの頂点をドラッグして移動できるようになります。

p4-5

以上です。

( Written by T.buzz.Ikura+ )

Social Button

Facebook Page