GoogleMapで設定したルート上の曲角の座標

Question

GoogleMapで設定したルート上の曲がり角の座標を表示させたいです。
現在のソースは以下↓なのですがこれだと
目的地A、目的地Bの座標が出てしまうのですが、設定した目的地までの曲がり角全ての座標を出したいです。
よろしくお願いします。

計算しているソース
//◆総距離合計
function computeTotalDistance(result) 
{
var total = 0;
var myroute = result.routes[0];
　　　　for (i = 0; i < myroute.legs.length; i++) 
　　　　{
　　　　total += myroute.legs[i].distance.value;
　　　　}
　　　　total = total / 1000.

document.getElementById("disp_total").innerHTML = total + " km";
document.getElementById("X1").innerHTML = myroute.legs[0].start_location.lat();
　　　　document.getElementById("Y1").innerHTML = myroute.legs[0].start_location.lng();
　　　　document.getElementById("X2").innerHTML = myroute.legs[1].start_location.lat();
　　　　document.getElementById("Y2").innerHTML = myroute.legs[1].start_location.lng();
}

fujillin · Accepted Answer

ANo1です。方法論よりも実例なのかなと思い、googleのサイトを見ながら作成してみました。（詳しくはありませんので…）プリミティブな計算方法にしていますので、効率は悪いと思います。（例えば計算済みの距離データを利用していないとか）また、とりあえずの書きっぱなしなので、要領が悪いのと読みにくい点はご容赦願います。＊スタート地点とゴール地点はドラッグ可能です。＊（例として）中間点は全体の4分割地点とし、マーカー表示しています。＊中間地点のマーカーをクリックするとその地点の座標が表示されます。＊マーカーはこの回答欄では記述しにくいため、googleさんのアイコンを利用しています。＊各種のデータチェック等は全て省略しています。（全角空白は半角に：長いので分割になっています）） sample

fujillin · Answer

なんども、すみません。

とりあえずの修正。
pathAnalyzeの
　　if(subD >= secD){　～～　}
部分を以下に書き換えれば、No4に関しては修正できるかと…

while(subD >= secD){
　　subD -= secD;
　　var secP = interpolate(subPath, (sd - subD)/sd);
　　sd = subD;
　　$markers.setSector(secP);
　　subPath.setAt(0, new google.maps.LatLng(secP.lat, secP.lng));
　}

fujillin · Answer

おっと…

あとで気が付きましたが、一つのラインが複数区間分の長さがあるときにおかしなことになりますね。
うっかりしてました。

そのあたりは、良しなに・・・・

fujillin · Answer

//地図表示
var mapDisp = function(lat, lng, id){
　return new google.maps.Map(document.getElementById(id), {
　　zoom: 15,
　　center: new google.maps.LatLng(lat, lng),
　　mapTypeId: google.maps.MapTypeId.ROADMAP,
　　scaleControl: true,
　　scrollwheel: false
　});
}

//マーカー作成
var createMarker = function(char, lat, lng, col){
　var flg = !!(char=="S" || char=="G");
　var chst = "d_map_pin_letter_withshadow";
　var chld = char + "|" + col + "|000000";
　var icon = {
　　anchor: {x:10, y:34},
　　url: "http://chart.apis.google.com/chart?chst=" + chst + "&chld=" + chld
　};
　var marker = new google.maps.Marker({
　　position: new google.maps.LatLng(lat, lng),
　　map: $map, draggable: flg, icon: icon
　});
　if(flg) google.maps.event.addDomListener(marker, "dragend", routeSearch);
　return marker;
}

var clickHandler = function(n){
　return function(){
　　var msg = "point " + (n+1) + "

" + round($markers.sectors[n].getPosition());
　　alert(msg);
　}
}

for(var i=0; i<m.sectorsNum; i++){
　　var sec = createMarker((i+1).toString(), 0, 0, "FFFF66");
　　google.maps.event.addDomListener(sec, "click", clickHandler(i));
　　m.sectors[i] = sec; 
　}
　m.clearSector();
　return m;
}

//ラインObject作成
var polyLine = function(){
　return new google.maps.Polyline({
　　strokeColor: '#006644',
　　strokeOpacity: 0.5,
　　strokeWeight: 6,
　　map: $map
　});
}

//経路検索
var routeSearch = function(){
　var request = {
　　origin: $markers.start.getPosition(),
　　destination: $markers.goal.getPosition(),
　　travelMode: google.maps.TravelMode.DRIVING
　};
　directionS.route(request, function(response, status){
　　if (status == google.maps.DirectionsStatus.OK) pathCombine(response);
　});
}

//経路統合・表示
var pathCombine = function(r){
　var step, leg = r.routes[0].legs[0];
　var path = new google.maps.MVCArray();
　var i, p, j, pt;
　for(i=0; step=leg.steps[i++];){
　　p = google.maps.geometry.encoding.decodePath(step.polyline.points);
　　for(j=0; pt=p[j++];) if(!(i>1&&j==1)) path.push(pt);
　}
　$pathLine.setPath(path);
　pathAnalyze(path);
}

//経路解析
//（座標値リスト作成・区間点表示）
var rd = function(n){ return Math.round(n*10000)/10000; }
var round = function(pt){
　return " ( " + rd(pt.lat()) + ", " + rd(pt.lng()) + " )";
}
var interpolate = function(path, r){
　var p1 = path.getAt(0), p2 = path.getAt(1);
　var lat = (p2.lat() - p1.lat()) * r + p1.lat();
　var lng = (p2.lng() - p1.lng()) * r + p1.lng();
　return { lat:lat, lng:lng };
}

var pathAnalyze = function(path){
　var i, pt = path.getAt(0); 
　var subPath = new google.maps.MVCArray();
　　subPath.push(pt);
　var sd = google.maps.geometry.spherical.computeLength(path);
　var subD = 0, secD = sd / 4;
　　sd = Math.round(sd*100)/100;
　var txt = "◆ 折れ点座標リスト ◆<br> 全長＝" + sd;
　　txt += "<ul style='margin:0;'><li>#1" + round(pt) + "</li>";

$markers.clearSector();
　for(i=1; pt=path.getAt(i++);){
　　subPath.push(pt);
　　sd = google.maps.geometry.spherical.computeLength(subPath);
　　txt += "<li>#" + i + round(pt) + "</li>";
　　subD += sd;
　　if(subD >= secD){
　　　subD -= secD;
　　　$markers.setSector(interpolate(subPath, (sd - subD)/sd));
　　}
　　subPath.removeAt(0);
　}
　document.getElementById("route").innerHTML = txt + "</ul>";
}

//初期設定
var $map = mapDisp(35.684, 139.756, "map");
var directionS = new google.maps.DirectionsService();
var $markers = initMarker();
var $pathLine = polyLine();

routeSearch();

})();
</script>
</body>
</html>

fujillin · Answer

う～～ん。前回からの回答者です。

質問者様には当たり前のことでも、回答者さんたちにとっては質問文に書かれている情報が全てですので、書かれていない情報はわかりません。
『GoogleMapで設定したルート』といわれても誰がどう設定したものなのか不明ですし、ご提示のスクリプトでもresultが何を意味しているのかわからないので、回答しようがないということになっているのではと想像します。
無理に回答しようとしても、相当に想像をたくましくしてエスパー的に当てなければならないことになってしまいますが、わざわざそこまでやる人も少ないでしょう。（私の最初の回答も、それなりに想像をたくましゅうしています。）

というわけで、第三者にわかりやすい形で情報（状況）を提示しないと、回答はつきにくいと思いますよ。

また、前回もご紹介したように、google mapについてはgoogleのサイトの情報が一番確実で、それ以上の情報はありません。同サイトは、説明も詳しいですしサンプルも豊富に用意してくれているので、回答する人もそれ以上の情報を持っていないと言ってよいでしょう。（google関係者を除いて）

現在のペースでご質問なさっていると、今後も質問を繰り返すことになりそうなので、敢えて辛口なことを書かせていただきましたが、ご容赦ください。

さて、それはさておいて・・・

前回の回答を再読していただければわかると思いますが、jsonの構造を再確認してください。
　https://developers.google.com/maps/documentation/directions/#JSON
legは一つのルートを示していて、それは複数のstepから構成されています。
さらに、各stepは単一の直線ではなく折れ線（ポリライン）で構成されています。
それなので、ルートを表示する折れ線上にある屈曲点を全てリストアップしたければ、各step内のポリラインを解析することが必要となります。

ご提示のスクリプトでは、legの情報をとっていますので、始点はスタート地点、終点はエンドの地点、距離は（通常はlegがひとつだけ返されるので）全体の距離を示すことになります。（複数返される時は、各ルートの距離の総計になると想像します）

GoogleMapで設定したルート上の曲角の座標

なんども、すみません。

おっと…

ANo1です。

う～～ん。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング