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

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

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

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

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

3480閲覧

googleMapを活用して移動経路を線で結んで表示

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

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

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/12/04 19:39

編集2022/01/12 10:55

###前提・実現したいこと
googleMapを活用して移動経路の記録をマップ上で行いたいと考えています。
現時点では、geoLocation(watchPosition)を活用して位置情報を常に追跡し、マップに表示させています。
googleMapを活用して移動経路の表示をしたいです。
今悩んでいることは、サーバーへの位置情報データの格納方法と、移動経路を線で結ぶことです
線を結んでいくタイミングは、「移動するごとに常に線を表示」または「位置情報をまとめて最後に線を結ぶ」どちらでも構いません。初心者でも理解が早いほうが嬉しいです。
Polylineを活用すると予想していますが、もっとふさわしいものがあれば教えていただきたいです。
サンプルや、参考になるページ等ご存じでしたらお願いします。
###該当のソースコード
/html/

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex,nofollow"> <!-- ビューポートの設定 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./css/geolocation-api.css" rel="stylesheet"> <script scr="ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCE7BTRiGM6545NJFw3Mq0xVhVWrD-dLZ0&callback=initMap"> </script> <script src="./js/plotMap.js "></script>
<title>Plot Map</title>
</head> <body onload="Init()"> <div class="map-wrapper"> <div id="map-canvas"></div> </div> <h2>取得したデータ</h2> <dl id="result"></dl> </body> </html>

/JavaScript/
// グローバル変数

var syncerWatchPosition = {
count: 0 ,
lastTime: 0 ,
map: null ,
marker: null ,
} ;

// 成功した時の関数
function successFunc( position )
{
// データの更新
++syncerWatchPosition.count ; // 処理回数

// HTMLに書き出し
document.getElementById( 'result' ).innerHTML = '<dt>緯度</dt><dd>' + position.coords.latitude + '</dd><dt>経度</dt><dd>' + position.coords.longitude + '</dd><dt>高度</dt><dd>' + position.coords.altitude + '</dd><dt>速度</dt><dd>' + position.coords.speed + '</dd><dt>実行回数</dt><dd>' + syncerWatchPosition.count + '回</dd>' ;

// 位置情報
var latlng = new google.maps.LatLng( position.coords.latitude , position.coords.longitude ) ;

// Google Mapsに書き出し
//if( syncerWatchPosition.map == null )
//{
// 地図の新規出力
syncerWatchPosition.map = new google.maps.Map( document.getElementById( 'map-canvas' ) , {
zoom: 17 , // ズーム値
center: latlng , // 中心座標 [latlng]
} ) ;

// マーカーの新規出力 syncerWatchPosition.marker = new google.maps.Marker( { map: syncerWatchPosition.map , position: latlng , } ) ; map.drawRoute({ origin: [-12.044012922866312, -77.02470665341184], destination: latlng, travelMode: 'driving', strokeColor: '#131540', strokeOpacity: 0.6, strokeWeight: 6 });

//}

}

// 失敗した時の関数
function errorFunc( error )
{
// エラーコードのメッセージを定義
var errorMessage = {
0: "原因不明のエラーが発生しました…。" ,
1: "位置情報の取得が許可されませんでした…。" ,
2: "電波状況などで位置情報が取得できませんでした…。" ,
3: "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。" ,
} ;

// エラーコードに合わせたエラー内容を表示
alert( errorMessage[error.code] ) ;
}

// オプション・オブジェクト
var optionObj = {
"enableHighAccuracy": false ,
//"timeout": 1000000 ,
//"maximumAge": 0 ,
} ;

function Init(){
// 現在位置を取得する
navigator.geolocation.watchPosition( successFunc , errorFunc , optionObj ) ;
}
###補足情報
※プログラミング初心者です。
筋の通っていない内容や、無駄な記述などが多数見受けられると思いますがどうぞよろしくお願いいたします。
後で確認できるように無駄な記述も「//」で残してあります。ご了承ください。

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

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

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

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

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

kei344

2016/12/05 02:14

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答3

0

gmaps.jsこちらを使われてはいかがでしょうか?
割と簡単にカスタマイズできますよ

使い方はいろんなサイトで紹介されています。
[Google API] 手軽にGoogle Maps APIをカスタマイズできる「gmaps.js」の使い方

投稿2016/12/04 20:32

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

投稿2017/01/11 08:18

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

DirectionsServiceを使えば簡単です。
http://matometaru.com/gmaps02/

MapBuildr
https://mapbuildr.com/buildr

投稿2017/01/12 04:53

編集2017/01/12 04:55
matometaru

総合スコア43

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問