🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Q&A

解決済

1回答

1124閲覧

GoogleMapsAPIで取得した詳細な座標配列(legs/step/path)から、一定距離の地点にマーカーを立てたい

tatsu3

総合スコア11

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

0グッド

0クリップ

投稿2021/02/07 04:43

編集2021/02/08 12:40

実現したいこと

コロナで行くことができない海外に思いを馳せ、欧州の有名な巡礼路をGoogle Maps上で歩く自分用のアプリを作っています。
歩いた距離は、活動量トラッカーFitbitのAPIを使ってタイムリーに取得します。

##これまでできたこと
起点から終点までのルートを取得し、下記のarrでそのルート上の座標配列を取得。隣り合った座標の距離を次々足していき、指定した距離に最近接の座標にマーカーを立てることができました。

javascript

1var arr = response.routes[0].overview_path; 2var between = gMaps.geometry.spherical.computeDistanceBetween; 3var difference = Infinity; 4var total = 0; 5 for (var i = 0, l = arr.length - 1; i < l; i++) { 6 var current = arr[i]; 7 var distance = between(current, arr[i + 1]); 8 var dif = Math.abs(mark - (total + distance)); 9 if (difference > dif) { 10 difference = dif; 11 total += distance; 12 } 13 else { 14 new gMaps.Marker({ 15 position: current, 16 map: map, 17 title: total + 'm' 18 }); 19 break; 20 } 21

##改善したこと、試みたこと
より誤差を小さくするため、ルート上のより多くの座標を取得できないか調べたところ、routesの下の、overview_pathプロパティ以外に、legs > steps > pathと辿って行ったところに、より詳細な座標が格納されていることが分かりました。これをfor文で回して取得し、全てをまとめてwhole_pathという座標配列にして見ました。座標の数(length)をみると、overview_pathの座標の数と比べて7倍くらい多く、精度が高いことが確認できました。
これをもとに、同じように隣り合った座標間の距離を次々足していき、指定した距離に最近接の座標にマーカーを立てようと以下のようなコードにしてみましたが、うまくいきませんでした。

javascript

1var whole_path = []; 2var legs = response.routes[0].legs; 3 for (i = 0; i < legs.length; i++) { 4 var steps = legs[i].steps; 5 for (j = 0; j < steps.length; j++) { 6 var nextSegment = steps[j].path; 7 for (k = 0; k < nextSegment.length; k++) { 8 whole_path.push(nextSegment[k]); 9 } 10 } 11 } 12var between = gMaps.geometry.spherical.computeDistanceBetween; 13var difference = Infinity; 14var total = 0; 15 for (var i = 0, l = whole_path.length - 1; i < l; i++) { 16 var current = whole_path[i]; 17 var distance = between(current, whole_path[i + 1]); 18 var dif = Math.abs(mark - (total + distance)); 19 if (difference > dif) { 20 difference = dif; 21 total += distance; 22 } 23 else { 24 new gMaps.Marker({ 25 position: current, 26 map: map, 27 title: total + 'm' 28 }); 29 break; 30 } 31

途中までは、上と同じようにうまく行っているようなのですが、最後にcurrentの座標を調べてみると、起点と同じ位置から動いていません。
どうしたら良いのか(そもそも、この考え方で良いのかどうか)ご教示頂けると、とてもとてもありがたく思います。どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

身近な方にご教示頂き、解決できました。

javascript

1 2<script 3 src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=xxxxx"></script> 4<script> 5 var gMaps = google.maps; 6 var disp; 7 var map; 8 function initialize() { 9 var options = { 10 zoom: 14, 11 mapTypeId: gMaps.MapTypeId.ROADMAP, 12 center: new gMaps.LatLng(xx,xxxx xxx.xxxxx) 13 } 14 map = new gMaps.Map(document.getElementById("map_canvas"), options); 15 disp = new gMaps.DirectionsRenderer(); 16 disp.setMap(map); 17 calcRoute('<起点を指定>', '<終点を指定>', <中間点をメートルで指定>); 18 } 19 20 function calcRoute(start, end, mark) { 21 var request = { 22 origin: start, 23 destination: end, 24 travelMode: gMaps.DirectionsTravelMode.WALKING, 25 optimizeWaypoints: true 26 }; 27 var ds = new gMaps.DirectionsService(); 28 ds.route(request, function (response, status) { 29 30   if (status == gMaps.DirectionsStatus.OK) { 31 var whole_path = []; 32 var legs = response.routes[0].legs; 33 for (i = 0; i < legs.length; i++) { 34 var steps = legs[i].steps; 35 for (j = 0; j < steps.length; j++) { 36 var nextSegment = steps[j].path; 37 for (k = 0; k < nextSegment.length; k++) { 38 whole_path.push(nextSegment[k]); 39 } 40 } 41 } 42       //console.log(whole_path);//array(2077) 43 var between = gMaps.geometry.spherical.computeDistanceBetween; 44       var difference = Infinity; 45 var pin = 0; 46 var next = mark; 47 var total = 0; 48 for (var i = 0, l = whole_path.length - 1; i < l; i++) { 49 var current = whole_path[i]; 50 var distance = between(current, whole_path[i + 1]); 51 var dif = next - (total + distance); 52 if (dif < 0) { 53 new gMaps.Marker({ 54 position: current, 55 map: map, 56 title: total + 'm' 57 }); 58 break; 59 } 60 total += distance; 61 } 62 disp.setDirections(response); 63 } 64 }); 65 }

試しに<起点を指定>に札幌駅、<終点を指定>に稚内駅、<中間点を指定>に100000(m=100km)を入れて試してみました(札幌駅−稚内駅間は約328kmあります)。

すると、99999.42946368486mの地点にピンを打つことができました。つまり誤差は実にわずか57cmです。質問で書いた前のコードで同じことをすると、500m以上の誤差が出ますので大変な精度の違いです。

お忙しい中、教えて頂いたYさま、大変感謝いたします。

投稿2021/02/17 14:13

tatsu3

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問