GoogleMapで設定したルート上の曲角の座標
- GoogleMapで設定したルート上の曲がり角の座標を表示させたいです。
- 現在のソースでは目的地A、目的地Bの座標が出てしまいますが、設定した目的地までの曲がり角全ての座標を表示したいです。
- ソースコードでは総距離合計を計算し、各曲がり角の座標を表示しています。
- ベストアンサー
GoogleMapで設定したルート上の曲角の座標
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(); }
- zexal1991
- お礼率10% (1/10)
- JavaScript
- 回答数5
- ありがとう数15
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
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"></script> </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> <!-- 以下 つづく -->
その他の回答 (4)
- fujillin
- ベストアンサー率61% (1594/2576)
なんども、すみません。 とりあえずの修正。 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
- ベストアンサー率61% (1594/2576)
おっと… あとで気が付きましたが、一つのラインが複数区間分の長さがあるときにおかしなことになりますね。 うっかりしてました。 そのあたりは、良しなに・・・・
- fujillin
- ベストアンサー率61% (1594/2576)
<!-- つづき --> <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>
- fujillin
- ベストアンサー率61% (1594/2576)
う~~ん。前回からの回答者です。 質問者様には当たり前のことでも、回答者さんたちにとっては質問文に書かれている情報が全てですので、書かれていない情報はわかりません。 『GoogleMapで設定したルート』といわれても誰がどう設定したものなのか不明ですし、ご提示のスクリプトでもresultが何を意味しているのかわからないので、回答しようがないということになっているのではと想像します。 無理に回答しようとしても、相当に想像をたくましくしてエスパー的に当てなければならないことになってしまいますが、わざわざそこまでやる人も少ないでしょう。(私の最初の回答も、それなりに想像をたくましゅうしています。) というわけで、第三者にわかりやすい形で情報(状況)を提示しないと、回答はつきにくいと思いますよ。 また、前回もご紹介したように、google mapについてはgoogleのサイトの情報が一番確実で、それ以上の情報はありません。同サイトは、説明も詳しいですしサンプルも豊富に用意してくれているので、回答する人もそれ以上の情報を持っていないと言ってよいでしょう。(google関係者を除いて) 現在のペースでご質問なさっていると、今後も質問を繰り返すことになりそうなので、敢えて辛口なことを書かせていただきましたが、ご容赦ください。 さて、それはさておいて・・・ 前回の回答を再読していただければわかると思いますが、jsonの構造を再確認してください。 https://developers.google.com/maps/documentation/directions/#JSON legは一つのルートを示していて、それは複数のstepから構成されています。 さらに、各stepは単一の直線ではなく折れ線(ポリライン)で構成されています。 それなので、ルートを表示する折れ線上にある屈曲点を全てリストアップしたければ、各step内のポリラインを解析することが必要となります。 ご提示のスクリプトでは、legの情報をとっていますので、始点はスタート地点、終点はエンドの地点、距離は(通常はlegがひとつだけ返されるので)全体の距離を示すことになります。(複数返される時は、各ルートの距離の総計になると想像します)
関連するQ&A
- Googlemapで始点~次のステップ間の距離を
私は現在、GoogleMapで現在地から指定した目的地までのルートを表示させたあとに、 始点(Start_location)から次のステップ(曲がり角)の緯度経度を次々と表示させていき、 最終的に 1、現在地の緯度経度 2、曲がり角(1)の緯度経度 3、曲がり角(2)の緯度経度 4、曲がり角(3)~ というようにを表示させたいのですが、 緯度経度(X,Y)を表示させると function (){return this[a]} で文字が表示されます。 緯度経度を表示させるためにはどういった書き方なのかを教えてください。 計算を行っているソースは以下です。 //◆総距離合計 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. var disp_total = document.getElementById("disp_total"); disp_total.innerHTML = "total:" + 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; }
- ベストアンサー
- JavaScript
- googlemap api での 座標の取得
googlemap apiを使って地図上をクリックしたところに 吹き出しをつくり、その中のフォームに情報を入力するという ページを作成してます。 が、うまく座標がとれません。 GEvent.addListener(map, 'click', function(overlay, point) { if (point) { document.getElementById("show_x").innerHTML = point.x; document.getElementById("show_y").innerHTML = point.y; map.openInfoWindowHtml(point,"<form><tableborder=1><tr><td><input type=text id=\"show_x\"><input type=text id=\"show_y\"></td></tr>); としていますが、show_x show_y が <input type=text value=***> のところに 入りません。 <body> 緯度<p id="show_x"></p> 経度<p id="show_y"></p> </body> のところには表示されます。
- 締切済み
- JavaScript
- googleMapで情報ウィンドウの表示が崩れる
お世話になります。 DBに登録したマーカーデータを取り出して グーグルマップに表示するツールを作ったのですが、 マーカーをクリックしてインフォメーションウィンドウを表示すると 「吹き出し」の形が切れ目が入ったように崩れてしまいます。 またそこには取り出したデータを表示もするのですが、 ドラッグして反転させないと見えない状態です。(単に文字色が白?) 以下がプログラムの内容になりますが、何かわかることがありましたらご指摘願えないでしょうか? よろしくお願い致します。 var map function startUp(){ map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.618, 139.7672), 10); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()); map.enableDoubleClickZoom(); GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var mk = makeMarker(load.data[i].lat, load.data[i].lng, load.data[i].name); map.addOverlay(mk); } }); } function makeMarker(lat, lng, name){ var point = new GLatLng(lat,lng); var marker = new GMarker(point); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("緯度:" + lat + "<br>経度:" + lng + "<br>施設名:" + name); }); return marker; } 本当はわざわざ関数化することなく下のようにやりたいのですがエラーになるので上のようにしています。 var mk = new GMarker(new GLatLng(load.data[i].lat, load.data[i].lng)); map.addOverlay(mk);
- 締切済み
- JavaScript
- javascriptの条件文
スマホにタッチした時の値を取得するスクリプトです。 よくわからないまま作成してますが、ご勘弁下さい。 <script type="text/javascript"> window.document.addEventListener("touchstart", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchmove", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchend", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = ""; }, true); ここまでは正常。 値を取得した、Yを下記のようにしたのですが、 500以上になってもロケーションが実行されません。 間違いなく構文が間違っているのですが、数時間格闘したのですが、わからないので すみませんが、教えて頂けると有難いです。 num = event.touches[0].clientY; if (num >= "500") { location.href = "https://www.google.co.jp/"; } </script>
- ベストアンサー
- JavaScript
- 「 '&lng='」の&の意味が分かりません。
下記はgooglemapで中心点(lat:緯度 lng:経度)からのある半径(radius)以内のマーカーを求めるプログラムの一部ですが「 '&lng=' '&radius='」に出てくる「&」の意味・機能がわかりません。 どなたかお分かりになれば教えていただきたく。 var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
- ベストアンサー
- その他(プログラミング・開発)
- なぜfunc()で動き、funcで動かないのか。
以前良く似た質問をしましたが、また疑問点が出たので質問します。 前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。 var img = new Image(); window.onload = function() { img.onload = func; } function func() { (省略) } その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。 しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { document.getElementById("result1").innerHTML = "result1"; } function result2() { document.getElementById("result2").innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか? あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { this.innerHTML = "result1"; } function result2() { this.innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> 両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか?
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- 同じメソッドを複数回、呼び出しは可能でしょうか
<script> var arg = new Object, p = location.search.substring(1).split('&'); for(var i=0; p[i]; i++){ var kv = p[i].split('='); arg[kv[0]] = kv[1]; } window.onload = function (){ if(01 == arg.id){document.getElementById("type").innerHTML = "あなたはA型";} else if(02 == arg.id){document.getElementById("type").innerHTML = "あなたはB型";} else if(03 == arg.id){document.getElementById("type").innerHTML = "あなたはO型";} else if(04 == arg.id){document.getElementById("type").innerHTML = "あなたはAB型";} else {document.getElementById("type").innerHTML = "わかりません";} } </script> サイトへの表示は <span id="type"></span> と記述することで、問題なく表示ることができています。 しかし、これを複数個所に記述すると 最初の箇所しか表示しません。 同じページの複数の箇所(希望は4か所)に表示させるためには、 どのようにすればよいのでしょうか。
- ベストアンサー
- JavaScript
- GoogleMapsから緯度経度をPHPに渡したい
GoogleMapsAPIを利用して、自サイトにマーキング可能な地図を表示させたいと思っています。 具体的には・・・ 目的の位置を表示させて「登録」ボタンを押すと、moveendで取得した緯度経度のデータをフォーム(PHP)に渡し、そのフォームからコメントを添えてDBに格納する。 といった具合です。 GoogleMapsAPIはJavaScriptでの記述なので、JavaScriptで取得した緯度経度データをどのようにPHPフォームに渡せばいいのかがわかりません。 当方、PHPは若干わかりますが、JavaScriptについては全くわかりません。 以下のソースで緯度経度を取得するところまではできたのですが・・・。 GEvent.addListener(map, 'moveend', function() { var cnt = map.getCenter(); document.getElementById("cnt_x").innerHTML = cnt.lng(); document.getElementById("cnt_y").innerHTML = cnt.lat(); }); }); これから、どのようにすればPHPのフォームに渡せるのでしょうか? よろしくお願いします。
- ベストアンサー
- JavaScript
- ラジオボタンとテキストボックスの連動
現在googleマップで経度、緯度の取得ができました。 そこで、こちらのサイト(http://www.geocities.jp/standing_art/hoheto/idokeido_old.html)のようにラジオボタン選択時のテキストボックスにのみ経度、緯度の取得を行いたいのですがどうすればいいでしょうか? 今あるソースはこれです。 <!DOCTYPE html> <html> <head> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //<![CDATA[ var map; function init() { var latlng = new google.maps.LatLng(39, 138); var opts = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts); google.maps.event.addListener(map, 'click', mylistener); } function mylistener(event) { document.getElementById("show_lng").innerHTML = event.latLng.lng(); document.getElementById("show_lat").innerHTML = event.latLng.lat(); } //]]> </script> </head> <body onload="init()"> <div id="map" style="height:560px"></div> 緯度 : <div id="show_lng"></div> 経度 : <div id="show_lat"></div> </body> </html>
- 締切済み
- JavaScript
お礼
回答を頂きありがとうございます。 出発地点と到着地点を決めてルート上の座標を決めることができました。 >>『GoogleMapで設定したルート』といわれても誰がどう設定したものなのか不明ですし、ご提示のスクリプトでもresultが何を意味しているのかわからないので、回答しようがないということになっているのではと想像します。 そうですね、ソースやHtmlをそのまま載せるなどしてどういう方法でresultを出しているか回答者さんに分かりやすくしないとだめですね。 次回からは気をつけます。