Yahoo! Maps 経路地図

  1. Yahoo! 経路地図
    1. 基本事項は、Yahoo! の 経路地図サイト をご参考に。
    2. このような、経路地図が作成できます。

  2. 経路地図の書き方
    1. 基本的形・・・次のようなタグを貼ります
        <img src="【URL】?【地図パラメータ】">   具体例
    2. 【URL】は、
        https://map.yahooapis.jp/course/V1/routeMap
    3. 【地図パラメータ】の記述。 (各パラメータは「&」で繋いで記述します)
      パラメータ  記 述 法 等
      API ID Yahoo! Maps を使うためには、アプリケーションIDを取得し、それを記述します。
      route 経路を指定。フォーマットは【属性:値】で、各項目を「|(パイプ)」繋いで記述。複数指定可
        属 性      値
       (緯度,経度)  最初が出発地点、最後が到着地点、間の他の緯度,経度は経由点。
       search  緯度経度列を経路探索するかどうかを指定。on(検索する:default),off(検索しない)
       width  経路の線の幅を指定。7(default)
       color  テキストの色を、RGBA 4桁または8桁の16進数字で指定。0000ff64(default)
       start  出発地点にマーカーを描画するかどうかを指定。on(表示:default),off(非表示)
       goal  到着地点にマーカーを描画するかどうかを指定。on(表示:default),off(非表示)
      width 地図の幅(単位:px)を指定します。256 (default値)、2000 (最大値)
      height 地図の高さ(単位:px)を指定します。256 (default値)、2000 (最大値)
      output 地図の出力形式を指定 png (default値),png32,gif,jpg,jpeg
      style 地図のスタイルを指定 base:standard (default値)、base:classic、base:grayish、base:simple
      pin マーカーを描画します。フォーマットは【属性:値】で、各項目を「|(パイプ)」繋いで記述。複数指定可
        属 性      値
       (緯度,経度)  マーカー位置を緯度,経度で指定
       type  マーカー、数字(0~99)、英字(a~z)、星(default)、小マーカー(指定なし)を選択
       color  red(default),blue,green,yellowを選択
       dx  マーカーの横位置を修正。 指定されたpix分右正方向横に移動。0(default)
       dy  マーカーの縦位置を修正。 指定されたpx分縦方向に移動。0(default)
      text テキストを描画します。フォーマットは【属性:値】で、各項目を「|(パイプ)」繋いで記述。複数指定可
        属 性    記 述 法
       (緯度,経度)  テキストを描画位置を緯度,経度で指定
       label  描画するテキストを指定。文字はUTF-8でURLエンコードします。
       color  テキストの色を、RGBA 4桁または8桁の16進数字で指定。323232ff(default)
       width  文字の大きさを指定。12(default)

    4. 具体例
      リスト例:
      <img src="https://map.yahooapis.jp/course/V1/routeMap?appid=【APPID】 &route=35.337108,139.545019,35.323594,139.554889,35.318937,139.550469|width:3|color:ff00ffcc|goal:off &width=240&height=360&pin=35.331822,139.555147|type:default|color:blue &text=35.331822,139.555147|label:%e5%bb%ba%e9%95%b7%e5%af%ba|color:0000ffff|width:18">
        表示例

  3. 関連サイト
    1. Yahoo! Static Maps APIを使う。
    2. Google Maps Static API を使う。

  ページのTopへ戻る  記述法