PC故障によってしばらく更新できませんでした・・
復活したので中断前にちょこっとやっていたgoogle mapルート検索について
書こうと思います。
サンプルはJR東京駅から皇居の車でのルートを表示し
マーカーおよび吹き出しを表示させるものとなります。
吹き出し表示を紹介をしているとこでクリックするたびに吹き出しが
多重化してるサンプルを見かけますが今回は多重化しないようにしています。
復活したので中断前にちょこっとやっていたgoogle mapルート検索について
書こうと思います。
サンプルはJR東京駅から皇居の車でのルートを表示し
マーカーおよび吹き出しを表示させるものとなります。
吹き出し表示を紹介をしているとこでクリックするたびに吹き出しが
多重化してるサンプルを見かけますが今回は多重化しないようにしています。
htmlは１行で済みます！楽ですねぇ
<div id="map"></div>
javascriptは少し長いです。
でも条件指定などが長いだけ。
でも条件指定などが長いだけ。
var From = "JR東京駅"; //出発点
var To = "皇居"; //行き先
//マップオブジェクトを生成します。
var myMap = new google.maps.Map(document.getElementById("map"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true, //マウスホイールスクロールを有効にする
scaleControl: true //スケールコントロールを有効にする
});
//マーカークリック時の吹き出し表示
function attachMessage(marker, msg, inf) {
google.maps.event.addListener(marker, 'click', function () {
inf.open(myMap, marker);
});
}
//マップ生成、条件指定
new google.maps.DirectionsService().route({
//出発点
origin: From,
//行き先
destination: To,
//移動方法（電車は動かないっぽい）
travelMode: google.maps.DirectionsTravelMode.DRIVING,
//途中通過したいポイントを使用するしない
optimizeWaypoints: true,
//通過点を指定する（緯度経度か文字列）
//waypoints[]
//高速道路を使用しない場合はTrue
avoidHighways: false,
//有料区間を使用しない場合はTrue
avoidTolls: false,
//代替ルート有無（動かない？？）
provideRouteAlternatives: false,
//最適化された最短距離にする。
optimizeWaypoints: true,
//もちろんメートル法
unitSystem: google.maps.DirectionsUnitSystem.METRIC,
//交通情報を考慮するか否か
durationInTraffic:true
}, function (result, status) {
//同期処理
var mapdisp = markers(result, status);
//markers関数内のはじめに出てくるyeildまで実行
mapdisp.next();
setTimeout(function () {
//markers関数内の２個目に出てくるyeildまで実行
mapdisp.next();
//markers関数内の３個目に出てくるyeildまで実行
mapdisp.next();
}, 500);
});
//functionに*が付いていること
function* markers(result, status) {
//ルート取得成功したら
if (status == google.maps.DirectionsStatus.OK) {
//ルート表示
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setDirections(result);
directionsRenderer.draggable = true;
directionsRenderer.setMap(myMap);
yield; //処理一時中断ポイント
//吹き出しデータ生成
var data = new Array();
//出発点の吹き出しの中身はhtml表示可能 iframeなども指定可能
contentString = "" + From + "
" + result.routes[0].legs[0].start_address + ""
data.push({
position: new google.maps.LatLng(result.routes[0].legs[0].start_location.G,
result.routes[0].legs[0].start_location.K ),
content: contentString
});
//同じく行き先の吹き出しを生成
contentString = "" + To + "
" +
result.routes[0].legs[0].end_address + ""
data.push({
position: new google.maps.LatLng(result.routes[0].legs[0].end_location.G,
result.routes[0].legs[0].end_location.K),
content: contentString
});
//マーカー＋吹き出し生成
for (i = 0; i < data.length; i++) {
//吹き出しオブジェクト
var infowindow = new google.maps.InfoWindow({
content: data[i].content
});
//マーカーオブジェクト
var myMarker = new google.maps.Marker({
position: data[i].position,
map: myMap,
//animation: google.maps.Animation.DROPもあり
animation: google.maps.Animation.BOUNCE
});
//マップに表示
attachMessage(myMarker, data[i].content, infowindow);
yield; //処理一時中断ポイント
}
}
}
</span>
<span>
</span>
<span>
</span>
<span>
</span><br />
<div id= "c2"></div>
<div id= "f2"></div>
<div id= "i2"></div>
<div id= "s2"></div>
HTML表示と同時に行うとどうしても遅い感じを与えるため
アイコン表示が終わって一呼吸後に未読件数を表示することによって軽減してます。