ホ−ム » 応用サンプル » マーカをドラッグして自動車ルートを表示する

マーカをドラッグして自動車ルートを表示する

実行結果

次の例では、初期表示で任意の2地点間の自動車ルートを探索して地図に表示します。
マーカはドラッグして移動させることができ、移動後の地点でルートを再探索します。

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/advanced/drag_route.html

ソースコードと解説

自動車のルートを探索するには、ZDC.SearchgetRouteByDrive()を利用します。
ルートを地図内に表示するには、ZDC.MapクラスのgetAdjustZoom()メソッドを利用します。
マーカをドラッグして移動させるには、ZDC.addListener()を利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,search.js,shape.js&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
  var map, mrkStart, mrkEnd, dragging, draggingMrk, difLat, difLon,
      oldStartLat, oldStartLon, oldEndLat, oldEndLon,
      plWidgets = [],
      imgdir = '../../image/search/';

  var guide_type = {
    'start': {
       custom: {
         base: {
           src: imgdir + 'route_bg.png',
           imgSize: new ZDC.WH(35, 35),
           imgTL: new ZDC.TL(0, 0)
         },
         content: {
           src: imgdir + 'route_cat.png',
           imgSize: new ZDC.WH(35, 35),
           imgTL: new ZDC.TL(0, 0)
         }
       },
      offset: ZDC.Pixel(-5, -35)
    },
    'end': {
      custom: {
        base: {
          src: imgdir + 'route_bg.png',
          imgSize: new ZDC.WH(35, 35),
          imgTL: new ZDC.TL(38, 0)
        },
        content: {
          src: imgdir + 'route_cat.png',
          imgSize: new ZDC.WH(35, 35),
          imgTL: new ZDC.TL(35, 0)
        }
      },
      offset: ZDC.Pixel(-5, -35)
    }
  };

  var line_property = {
    '高速道路': {
      strokeColor: '#3000ff', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    '都市高速道路': {
      strokeColor: '#008E00', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    '国道': {
      strokeColor: '#007777', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    '主要地方道': {
      strokeColor: '#880000', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    '都道府県道': {
      strokeColor: '#008800', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    '一般道路(幹線)': {
      strokeColor: '#000088', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    '一般道路(その他)': {
      strokeColor: '#880000', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    '導入路': {
      strokeColor: '#880000', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    '細街路(主要)': {
      strokeColor: '#880000', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    },
    'フェリー航路': {
    },
    '道路外': {
      strokeColor: '#880000', strokeWeight: 5,
      lineOpacity: 0.5, lineStyle: 'solid'
    }
  };

  function loadMap() {
    var startLat = 35.7188213, startLon = 140.2055166,
      endLat = 35.7825368, endLon = 139.2924499;

    map = new ZDC.Map(
      document.getElementById('ZMap')
    );

    /* 地図上の緯度経度を取得(getPointerPosition)できるようにする */
    map.pointerPositionOn();

    /* マーカを追加 */
    mrkStart = new ZDC.Marker(
      new ZDC.LatLon(startLat, startLon),
      guide_type['start']
    );
    mrkEnd = new ZDC.Marker(
      new ZDC.LatLon(endLat, endLon),
      guide_type['end']
    );
    map.addWidget(mrkStart);
    map.addWidget(mrkEnd);

    /* 吹き出しを追加 */
    var msg_info = new ZDC.MsgInfo(startLat, {offset: ZDC.Pixel(12, -30)});
    map.addWidget(msg_info);

    /* マーカクリック時のイベントを登録 */
    ZDC.bind(
      mrkStart,
      ZDC.MARKER_CLICK,
      {name: 'スタート', marker: mrkStart, info: msg_info},
      showInfo
    );
    ZDC.bind(
      mrkEnd,
      ZDC.MARKER_CLICK,
      {name: 'ゴール', marker: mrkEnd, info: msg_info},
      showInfo
    );

    /* マーカをドラッグ可能にする */
    ZDC.addListener(map, ZDC.MAP_MOUSEMOVE, onMouseMove);
    ZDC.addListener(map, ZDC.MAP_MOUSEUP, onMouseUp);

    ZDC.addDomListener(document, 'mouseup', onMouseUp);

    ZDC.addListener(mrkStart, ZDC.MARKER_MOUSEMOVE, onMouseMove);
    ZDC.addListener(mrkStart, ZDC.MARKER_MOUSEDOWN, onMouseDown);
    ZDC.addListener(mrkStart, ZDC.MARKER_MOUSEUP, onMouseUp);

    ZDC.addListener(mrkEnd, ZDC.MARKER_MOUSEMOVE, onMouseMove);
    ZDC.addListener(mrkEnd, ZDC.MARKER_MOUSEDOWN, onMouseDown);
    ZDC.addListener(mrkEnd, ZDC.MARKER_MOUSEUP, onMouseUp);

    /* 自動車ルート探索を実行 */
    searchRoute();
  }

  /* 吹き出しを表示 */
  function showInfo() {
    this.info.moveLatLon(this.marker.getLatLon());

    this.info.setHtml(
      '<div style="font-size:80%; line-height: 1.3;"><b>' +
      this.name + '</b><br>' +
      '緯度:' + this.marker.getLatLon().lat + '<br>' +
      '経度:' + this.marker.getLatLon().lon + '</div>'
    );

    this.info.open();
  }

  /* 自動車ルート探索を実行 */
  function searchRoute() {
    /* マーカ位置の変化がない場合は自動車ルート探索を行わない */
    if (oldStartLat == mrkStart.getLatLon().lat &&
      oldStartLon == mrkStart.getLatLon().lon &&
      oldEndLat == mrkEnd.getLatLon().lat &&
      oldEndLon == mrkEnd.getLatLon().lon) {
        return;
    }

    ZDC.Search.getRouteByDrive({
      from: mrkStart.getLatLon(),
      to: mrkEnd.getLatLon()
    },function(status, res) {
      if (status.code == '000') {
        /* 取得成功 */
        writeRoute(res);

        oldStartLat = mrkStart.getLatLon().lat;
        oldStartLon = mrkStart.getLatLon().lon;
        oldEndLat = mrkEnd.getLatLon().lat;
        oldEndLon = mrkEnd.getLatLon().lon;
      } else {
        /* 取得失敗 */
        alert(status.text);
      }
    });
  }

  /* 自動車ルートを描画 */
  function writeRoute(res) {
    var link = res.route.link, latlons = [];

    /* 前回描画した領域を消去 */
    refreshPolygon();

    for (var i = 0, j = link.length; i < j; i++) {
      var opt = line_property[link[i].roadType];
      var pllatlons = [];

      for (var k = 0; k < link[i].line.length; k++) {
        pllatlons.push(link[i].line[k]);

        if (k == 0) {
          latlons[i] = link[i].line[k];
        }
        if (i == j - 1 && k == (link[i].line.length - 1)) {
          latlons[i + 1] = link[i].line[k];
        }
      }

      var pl = new ZDC.Polyline(pllatlons, opt);
      map.addWidget(pl);
      plWidgets.push(pl);
    }

    /* 地点が全て表示できる縮尺レベルを取得 */
    var adjust = map.getAdjustZoom(latlons);
    map.moveLatLon(adjust.latlon);
    map.setZoom(adjust.zoom);

    /* 地図を表示 */
    var divZmap = document.getElementById('ZMap');
    if (divZmap.style.display == 'none') {
      divZmap.style.display = 'block';
    }
  }

  /* 描画した領域をすべて削除 */
  function refreshPolygon() {
    while (plWidgets.length > 0) {
      map.removeWidget(plWidgets.shift());
    }
  }

  /* マウスダウンイベント処理 */
  function onMouseDown() {
    /* 移動対象のMarkerを保持 */
    draggingMrk = this;

    /* マウスダウン位置の緯度経度とマーカの緯度経度の差分を保持 */
    var cLatLon = map.getPointerPosition();
    difLat = cLatLon.lat - draggingMrk.getLatLon().lat;
    difLon = cLatLon.lon - draggingMrk.getLatLon().lon;

    dragging = true;
  }

  /* マウスムーブイベント処理 */
  function onMouseMove() {
    /* ドラッグ中のみ処理させる */
    if (dragging) {
      var latlon = map.getPointerPosition();

      /* マーカ表示緯度経度を取得 */
      var mkLat = latlon.lat - difLat;
      var mkLon = latlon.lon - difLon;
      draggingMrk.moveLatLon(new ZDC.LatLon(mkLat, mkLon));
    }
  }

  /* マウスアップイベント処理 */
  function onMouseUp() {
    if (dragging) {
      dragging = false;
      searchRoute();
    }
  }
//]]>
</script>
</head>

<body onload="loadMap();">
  <div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:0px; left:20px; position:absolute; display:none;"></div>
</html>