高速道路

広告

高速道路に関するデータです。JSON形式で用意してあります。

東名高速道路

中央自動車道

名神高速道路

東名阪自動車道(1) 東名阪自動車道(2)

伊勢湾岸自動車道

常磐自動車道

磐越自動車道

東北自動車道

秋田自動車道

関越自動車道

中国自動車道

山陽自動車道(1) 山陽自動車道(2) 山陽自動車道(3) 山陽自動車道(4) 山陽自動車道(5)

米子自動車道

九州自動車道

大分自動車道(1) 大分自動車道(2)

長崎自動車道

宮崎自動車道

北陸自動車道

上信越自動車道

東海北陸自動車道(1) 東海北陸自動車道(2)

道央自動車道

札樽自動車道

道東自動車道(1) 道東自動車道(2) 道東自動車道(3)

松山自動車道(1) 松山自動車道(2)

高松自動車道(1) 高松自動車道(2)

徳島自動車道

高知自動車道

今回は2つの形式のデータを読み込みます。まず高速道路の路線名や詳細データのファイル名を格納したデータです。

{
  "rosen":[
    {"rname":"選択して下さい","filename":"","count":0},
    {"rname":"東名高速道路","filename":"highway-toumei","count":1},
    {"rname":"中央自動車道","filename":"highway-chuou","count":1},
    {"rname":"名神高速道路","filename":"highway-meishin","count":1},
    {"rname":"東名阪自動車道","filename":"highway-higashimeihan","count":2},

...(略)

    {"rname":"松山自動車道","filename":"highway-matsuyama","count":2},
    {"rname":"高松自動車道","filename":"highway-takamatsu","count":2},
    {"rname":"徳島自動車道","filename":"highway-tokushima","count":1},
    {"rname":"高知自動車道","filename":"highway-kochi","count":1}
  ]
}

そして路線毎のICやJCTの詳細データです。場所の種類、名前、緯度、経度の4つのデータを格納しています。また路線を表示する時の色を一つデータとして持っています。

{
  "linecolor":"#80FFFF",
  "marker":[
    {"type":"JCT","pname":"北上","lat":39.274117,"lng":141.076233},
    {"type":"IC","pname":"北上西","lat":39.291785,"lng":140.98447},
    {"type":"IC","pname":"湯田","lat":39.313468,"lng":140.747252},
    {"type":"IC","pname":"横手","lat":39.279324,"lng":140.54661},

...(略)

    {"type":"IC","pname":"五城目八郎潟","lat":39.948121,"lng":140.096999},
    {"type":"IC","pname":"琴丘森岳","lat":40.033028,"lng":140.088427},
    {"type":"IC","pname":"八竜","lat":40.118109,"lng":140.011324},
    {"type":"IC","pname":"能代南","lat":40.153765,"lng":140.022705}
  ]
}

サンプル

では簡単なサンプルで試してみます。

code6_1.js

var map;
var rosenName = [];
var rosenFile= [];
var rosenCount= [];

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(38.393339,137.636719), 5);

    GDownloadUrl("./data/highway-list.json", createHighway);
  }
}

function createHighway(jsondata, statusCode){
  var json = eval("(" + jsondata + ")");

  var selectHtml = "";
  selectHtml += "<form>";
  selectHtml += "<select id='rosenname' onChange='dispRosen()'>";

  for (var i = 0; i < json.rosen.length; i++) {
    rosenName.push(json.rosen[i].rname);
    rosenFile.push(json.rosen[i].filename);
    rosenCount.push(json.rosen[i].count);
  }

  for (var i = 0; i < rosenName.length; i++) {
    selectHtml += "<option value='" + rosenFile[i] + "'>"
    selectHtml += rosenName[i];
    selectHtml += "</option>";
  }

  selectHtml += "</select>";
  selectHtml += "</form>";
  document.getElementById("rosen").innerHTML = selectHtml;

  dispRosenLine();
}

function dispRosenLine(){
  for (var i = 1; i < rosenName.length; i++){
    if (rosenCount[i] == 1){
      GDownloadUrl("./data/" + rosenFile[i] + ".json", createLineMap);
    }else{
      for (var no = 1; no <= rosenCount[i]; no++){
        GDownloadUrl("./data/" + rosenFile[i] + no + ".json", createLineMap);
      }
    }
  }
}

function createLineMap(jsondata, statusCode){
  var json = eval("(" + jsondata + ")");

  var polyline = [];

  var linecolor = json.linecolor;

  for (var i = 0; i < json.marker.length; i++) {
    var lat = json.marker[i].lat;
    var lng = json.marker[i].lng;
    polyline.push(new GLatLng(lat, lng));
  }

  map.addOverlay(new GPolyline(polyline, linecolor, 10, 0.7));
}

function dispRosen(){
  var val = document.getElementById("rosenname").value;
  var index = document.getElementById("rosenname").selectedIndex;

  if (index != 0){
    map.clearOverlays();
    dispRosenLine();

    map.setCenter(new GLatLng(38.393339,137.636719), 5);

    if (rosenCount[index] == 1){
      GDownloadUrl("./data/" + rosenFile[index] + ".json", createMap);
    }else{
      for (var no = 1; no <= rosenCount[index]; no++){
        GDownloadUrl("./data/" + rosenFile[index] + no + ".json", createMap);
      }
    }
  }
}

function createMap(jsondata, statusCode){
  var json = eval("(" + jsondata + ")");

  var selectHtml = "";
  selectHtml += "<form>";
  selectHtml += "<select id='ekiname' onChange='selectStation()'>";
  selectHtml += "<option value='0'>選択してください</option>";

  for (var i = 0; i < json.marker.length; i++) {
    var type = json.marker[i].type;
    var pname = json.marker[i].pname;
    var lat = json.marker[i].lat;
    var lng = json.marker[i].lng;

    var marker = createMarker(type, pname, lat, lng);
    map.addOverlay(marker);
    selectHtml += "<option value='" + lat + "," + lng + "'>"
    selectHtml += "[" + type + "]" + pname;
    selectHtml += "</option>";
  }

  selectHtml += "</select>";
  selectHtml += "</form>";

  document.getElementById("ic").innerHTML = selectHtml;
}

function createMarker(type, pname, lat, lng){
  var marker = new GMarker(new GLatLng(lat, lng));

  var html = "<p>" + "[" + type + "]" + pname + "</p>";

  GEvent.addListener(marker, "click", function(){
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

function selectStation(obj){
  var val = document.getElementById("ekiname").value;

  if (val != "0"){
    var latlng = val.split(",");
    var lat = latlng[0];
    var lng = latlng[1];

    map.setCenter(new GLatLng(lat, lng), 14);
  }
}

map6_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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル:高速道路</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code6_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div>
      <div id="rosen" style="width:150px;float:left;"></div>
      <div id="ic" style="width:120px;float:left;"></div>
    </div>
    <div id="map" style="width:500px; height:400px;clear:both;"></div>
  </body>
</html>

実際に試してみた画面イメージは次の通りです。

p6-1

選択メニューから高速道路の路線を選択すると、選択した高速道路のICやJCTがマーカーとして表示されます。

p6-2

p6-3

p6-4

また路線を選択すると、右側の選択メニュー内にその路線のICやJCTの一覧が表示されます。選択すればそのICやJCTに移動して表示します。各ICやJCTのマーカーをクリックすると情報ウィンドウ内にICやJCTの名前を表示します。

p6-5

p6-6

p6-7

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)