高速道路

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

今回は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