ページのレイアウトを設定する
まずは「今っぷ！」を表示するためのページを作成します。スマートフォン用ネイティブアプリライクな見た目を目指して、地図の表示サイズは全画面表示とし、地図の中心位置の情報・現在の地図の状態・各種ボタンを表示するためのウィンドウを追加します。この段階ではボタンにJavaScriptは登録していません。
スタイルは、スマートフォンなどのタッチデバイスでアクセスしたときに最適になるように設定しています。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>今っぷ！</title>
<style type="text/css">
html, body {
width: 100%; height: 100%;
}
html, body, div{
margin: 0; padding: 0;
}
div.panel {
font-size: 9pt;
z-index: 2;
overflow: hidden;
color: #fff;
background-color: #000;
border-radius: 8px;
position: absolute;
left:3px;
top: 3px;
opacity: 0.8;
}
</style>
</head>
<body>
<div id="map" style="width:100%; height:100%"></div>
<div class="panel">
<div id="time" style="padding: 2px;"></div>
<div id="position" style="padding: 2px;"></div>
<div id="map_kind" style="padding: 2px;"></div>
<div id="altitude" style="padding: 2px;"></div>
<div id="weather" style="padding: 2px;"></div>
<input type="button" value="現在地更新">
<input type="button" value="ルートの削除" >
</div>
</body>
</html>
初期状態の地図を表示する
ページを作成したらまずは地図を表示します。ページロードの完了後に表示するものとして以下のコードをwindow.onload以下に記述します。
//地図の初期状態
map = new Y.Map("map",{configure : {scrollWheelZoom : true}}); //スクロールによるzoom機能を設定
stylemaplayer = new Y.StyleMapLayer("bold");
var layerset = new Y.LayerSet("スタイル地図", [stylemaplayer]);
map.addLayerSet("stylemap",layerset);
map.drawMap(new Y.LatLng(now_latitude,now_longitude), 15 , "stylemap");
//現在地用のアイコンの登録
icon = new Y.Icon('http://i.yimg.jp/images/map/yolp/misc/107_pin07.png',{iconAnchor : new Y.Point(54,50)});
map.addControl(new Y.CenterMarkControl());
my_marker = new Y.Marker(new Y.LatLng(now_latitude,now_longitude), {icon: icon});
map.addFeature(my_marker);
これで、地図上の文字が太字で書かれているboldというスタイルの地図を全画面で表示します。加えて地図の中心にiconで指定した画像と地図の中心を示すセンターマーカーを表示します。
Y.Mapのインスタンスを作成するときに、{scrollWheelZoom : true}としておくことでマウスホイールのスクロールによる拡大縮小が行えるようになります。PCでの拡大縮小の操作がスムーズになるので設定します。
now_latitude,now_longitudeはグローバル変数で、初期位置である東京ミッドタウンの座標（緯度、経度）をそれぞれ格納しています。
var now_latitude=35.66572; //現在地の緯度 var now_longitude=139.73100; //現在地の経度
また、map,stylemaplayer,icon,my_markerは、別のfunction内でも利用するのでグローバル変数としています。
リバースジオコーダ利用関数の作成
ここからは地図の状態を自動で変更する関数や、変更に必要な情報を取得するための関数を作成していきます。まずリバースジオコーディングを行い、与えられた座標情報に対して該当する住所を取得および結果表示を行う関数を作成します。JavaScriptマップAPIには、ジオコーディング用のクラスY.GeoCoderが用意されていますので、それを使用します。
//リバースジオコーダ
var reverseGeo=function(lat,lon){
var geocoder = new Y.GeoCoder();
geocoder.execute( { latlng : new Y.LatLng(lat,lon) },
function(result){
//リバースジオコーディング結果を表示
if (result.features[0] && result.features[0].property.Address) {
document.getElementById('position').innerHTML = "中心位置 : "+result.features[0].property.Address;
}else{
document.getElementById('position').innerHTML = "中心位置 : 該当なし";
}
});
}
経路探索レイヤーを利用する関数の作成
経路探索を行い、与えられた座標情報周辺の店舗情報を取得して地図上に表示する関数を作成します。JavaScriptマップAPIには経路を検索して表示するためのレイヤー（Y.RouteSearchLayer）が用意されていますので、それを使用します。ここでは経路を表示する関数と経路を非表示にする関数のそれぞれを作成します。
経路表示関数は、現在地から与えられた目的地への経路を探索して表示します。
//経路探索
var root_search=function(g_latlon){
if(RouteSearchlayer){
map.removeLayer(RouteSearchlayer);
}
var latlons= [new Y.LatLng(now_latitude, now_longitude),g_latlon ];
var config={
"useCar":"false",
"useTollway":"false"
};
RouteSearchlayer = new Y.RouteSearchLayer();
map.addLayer(RouteSearchlayer);
RouteSearchlayer.execute(latlons,config);
}
この関数では、すでに経路探索結果が表示されていた場合、前回の経路を消す処理を行っています。また、configの設定により自動車や高速道路を使用しない経路を探索するようにしています。
経路を非表示にする関数は、経路が表示状態の時のみ、その経路を削除します。
//探索した経路削除用関数
var remove_root=function(){
if(RouteSearchlayer){
RouteSearchlayer.clearRoute();
RouteSearchlayer=null;
}
}
