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();
}
No.2ベストアンサー
- 回答日時:
ANo1です。
方法論よりも実例なのかなと思い、googleのサイトを見ながら作成してみました。(詳しくはありませんので…)
プリミティブな計算方法にしていますので、効率は悪いと思います。(例えば計算済みの距離データを利用していないとか)
また、とりあえずの書きっぱなしなので、要領が悪いのと読みにくい点はご容赦願います。
*スタート地点とゴール地点はドラッグ可能です。
*(例として)中間点は全体の4分割地点とし、マーカー表示しています。
*中間地点のマーカーをクリックするとその地点の座標が表示されます。
*マーカーはこの回答欄では記述しにくいため、googleさんのアイコンを利用しています。
*各種のデータチェック等は全て省略しています。
(全角空白は半角に:長いので分割になっています))
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …
</head>
<body>
<div style="width:860px;">
<div id="map" style="float:left; width:640px; height:600px;"></div>
<div id="route" style="float:right; font-size:11pt; width:220px;"></div>
</div>
<!-- 以下 つづく -->
No.5
- 回答日時:
なんども、すみません。
とりあえずの修正。
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));
}
No.3
- 回答日時:
<!-- つづき -->
<script type="text/javascript">
(function(){
//地図表示
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) + "\n\n" + round($markers.sectors[n].getPosition());
alert(msg);
}
}
var initMarker = function(){
var m = {
start: createMarker("S", 35.6908, 139.7564, "AABBFF"),
goal: createMarker("G", 35.6786, 139.7609, "FFAAAA"),
sectors: [],
sectorsNum: 3,
sectorsDef: 0,
clearSector: function(){
for(var i=0; i<this.sectorsNum; i++) this.sectors[i].setVisible(false);
this.sectorsDef = 0;
},
setSector: function(pt){
if(this.sectorsDef<this.sectorsNum){
var sec = this.sectors[this.sectorsDef++];
sec.setPosition(pt);
sec.setVisible(true);
}
}
}
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>
No.1
- 回答日時:
う~~ん。
前回からの回答者です。質問者様には当たり前のことでも、回答者さんたちにとっては質問文に書かれている情報が全てですので、書かれていない情報はわかりません。
『GoogleMapで設定したルート』といわれても誰がどう設定したものなのか不明ですし、ご提示のスクリプトでもresultが何を意味しているのかわからないので、回答しようがないということになっているのではと想像します。
無理に回答しようとしても、相当に想像をたくましくしてエスパー的に当てなければならないことになってしまいますが、わざわざそこまでやる人も少ないでしょう。(私の最初の回答も、それなりに想像をたくましゅうしています。)
というわけで、第三者にわかりやすい形で情報(状況)を提示しないと、回答はつきにくいと思いますよ。
また、前回もご紹介したように、google mapについてはgoogleのサイトの情報が一番確実で、それ以上の情報はありません。同サイトは、説明も詳しいですしサンプルも豊富に用意してくれているので、回答する人もそれ以上の情報を持っていないと言ってよいでしょう。(google関係者を除いて)
現在のペースでご質問なさっていると、今後も質問を繰り返すことになりそうなので、敢えて辛口なことを書かせていただきましたが、ご容赦ください。
さて、それはさておいて・・・
前回の回答を再読していただければわかると思いますが、jsonの構造を再確認してください。
https://developers.google.com/maps/documentation …
legは一つのルートを示していて、それは複数のstepから構成されています。
さらに、各stepは単一の直線ではなく折れ線(ポリライン)で構成されています。
それなので、ルートを表示する折れ線上にある屈曲点を全てリストアップしたければ、各step内のポリラインを解析することが必要となります。
ご提示のスクリプトでは、legの情報をとっていますので、始点はスタート地点、終点はエンドの地点、距離は(通常はlegがひとつだけ返されるので)全体の距離を示すことになります。(複数返される時は、各ルートの距離の総計になると想像します)
回答を頂きありがとうございます。
出発地点と到着地点を決めてルート上の座標を決めることができました。
>>『GoogleMapで設定したルート』といわれても誰がどう設定したものなのか不明ですし、ご提示のスクリプトでもresultが何を意味しているのかわからないので、回答しようがないということになっているのではと想像します。
そうですね、ソースやHtmlをそのまま載せるなどしてどういう方法でresultを出しているか回答者さんに分かりやすくしないとだめですね。
次回からは気をつけます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#で、ContextMenuStripに動的...
-
ジェネレーターの作り方
-
1日1回引けるJavaScriptおみく...
-
毎日日付の変わるタイミングを...
-
lengthが読めない理由が分からない
-
XMLの空白要素をJavas...
-
google apps scriptの終了のさせ方
-
jqGridについて
-
ローカルにあるファイルを検索...
-
1日1回だけ引けるjavascriptお...
-
GASでundefinedエラーが出ます
-
ASP.NETのコントロールの値をJa...
-
特定のclassを表示、非表示にする
-
JavaScriptでテーブル内?に矢...
-
ゆっくり上から下に出てくるポ...
-
Jscriptからのオープン
-
シンプルなweb版スタンプラリー...
-
C# 演算 分岐処理 繰り返し処理
-
for文での変数宣言について(他...
-
1日1回だけ引けるjavascriptお...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
ジェネレーターの作り方
-
ASP.NETのコントロールの値をJa...
-
C#で、ContextMenuStripに動的...
-
GASでundefinedエラーが出ます
-
ASP.NET MVCでObjectをjsに渡す
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
シンプルなweb版スタンプラリー...
-
html javascript リンク先アド...
-
ローカルにあるファイルを検索...
-
javascriptでiframeのURL変更は?
-
javaScript textareaの一行あた...
-
イベントが初めの一回しか起き...
-
C# 演算 奇数と偶数 表現の仕方
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
条件に応じて座席表をつくりた...
おすすめ情報