質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.47%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

691閲覧

二点間の角度を取得して表示させたい

yagura.

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2022/01/08 18:15

編集2022/01/09 09:18

角度算出→画面表示を行いたい

GoogleMapsAPIを使用し,現在地と目的地の角度を算出しHTMLで表示させたいのですが,どこがうまくいっていないのか皆目見当がつきません.

発生している問題・エラーメッセージ

エラーメッセージは出ていません.

該当のソースコード

javascript

1<!DOCTYPE html> 2<html> 3<head></head> 4<body> 5<div id="kazu"></div> 6<script type="text/javascript"> 7 8navigator.geolocation.getCurrentPosition(successCallback,errorCallback); 9 10function successCallback(position){ 11 12 var latitude = position.coords.latitude; 13 var longitude = position.coords.longitude; 14 15 var from = { lat: latitude, lng: longitude } 16 var to = { lat: 目的地の緯度, lng: 目的地の経度 } 17 var spherical = google.maps.geometry.spherical.computeHeading(from,to); 18 19 document.getElementById('kazu').innerHTML = spherical; 20} 21 22function errorCallback(){ 23 alert('現在地の取得に失敗しました') 24} 25 26</script> 27<script src="https://maps.googleapis.com/maps/api/js?key=J_s&callback=successCallback" async defer></script> 28</body> 29</html>

試したこと

スマホならセンサの関係でうまくいくと思ったが,PC上での動作と差がなかった.
iosです.

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

m.ts10806

2022/01/09 00:07

一般的な考え方で、2点だと角度できないはずなのですが。。。 距離ではなく? >スマホで動かしてみましたが無駄でした. 「無駄」とは? どういう現象が起きているのでしょう。 https://teratail.com/help/question-tips#questionTips3-4
yagura.

2022/01/09 09:10

”スマホならセンサの関係でうまくいくと思ったが,PC上での動作と差がなかった”という意味です. 説明不足ですみませんでした. また,この質問は自己解決に至りました.ありがとうございました.
m.ts10806

2022/01/09 09:13

質問は編集できるので、あとから見る人のためにも内容調整しておいてください。
yagura.

2022/01/09 09:15

承知しました.ご指摘ありがとうございます.
YT0014

2022/01/09 15:55

算出しているのは、角度ではなく、向きではないでしょうか? 少なくとも、computeHeading()で算出されるのは、向きです。
guest

回答2

0

自己解決

<script src="https://maps.googleapis.com/maps/api/js?key=J_s&callback=successCallback" async defer></script>の部分でlibraries=geometryが抜けていました.初歩的なミスでお騒がせしました.

自己解決には至りましたが,回答してくださったおかげで頭の中が整理され,改めてコードを見直すことができました.誠にありがとうございました.

投稿2022/01/09 09:06

yagura.

総合スコア2

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

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

0

コードの読み込み順の関係で google.maps.geometry.spherical.computeHeading の呼び出しに失敗しているのではと推測しました。
ボタンを置くなどして、クリックされたときに navigator.geolocation.getCurrentPosition(successCallback,errorCallback); を実行するようにしてみたらどうでしょうか?


これは回答とは関係ない補足ですが、スマホについては最低限AndroidかiOSかそれ以外かは明示したほうが良いと思います。
OSによってスマホブラウザ上のプログラムのデバッグ方法が若干異なるので、デバッグ方法に関してもアドバイスがしやすくなります。

投稿2022/01/09 06:56

S.Percentage

総合スコア283

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

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

yagura.

2022/01/09 09:14

自己解決に至りましたが,この回答のおかげで頭の中を整理することができました. ありがとうございました. 捕捉のご指摘についてですが,初めての質問で慣れておらず,申し訳ございませんでした.的確なアドバイスをありがとうございました.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問