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

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

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

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

JavaScript

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

Q&A

0回答

724閲覧

googlemapでの現在地取得がandroidで遅い(javascript)

sato1108

総合スコア14

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2018/05/14 00:34

編集2018/05/15 05:19

前提・実現したいこと

現在Monacaというプラットフォームを使い、Javascriptでgooglemapを表示し、現在地取得を行うというiOSとandroid両方で動作するようなアプリケーションを作っています。
javascriptではnavigator.geolocation.getCurrentPosition(success,error,options);を使い現在地を取得し、panToを使い指定のボタンを押すと現在地に飛ぶような形をとっています。
始めにhtmlを読み込んだ際(最初にそのページに飛んだ際)に現在地を取得できていれば現在地を中心にしたmapを表示し、現在地が取得できなければ(GPSがONになっていなければ)マーカーの一番目の場所を中心におくように作っています。
ソース自体のテンプレートはネットに転がっているような物で、地図を表示させ、現在地も一応は取得してこれるのですが、iOSでは素早く現在地を取得し飛んでくれるのに対し、androidでは現在地取得に相当な時間がかかってしまい(主に指定のボタンを押しpantoで飛ぶ際に15秒から20秒ほどかかってしまう)、アプリケーションとして使い物にならなくなってしまっています。
原因につきましても、自分のjavascript等のソースが悪いのか、Monaca自体が原因なのかわからない状態です。
もしお分かりの方いらっしゃいましたらご教授お願いいたします。

該当のソースコード(javascript)

//地図の作成 function initialize(markerData) { map = new google.maps.Map(document.getElementById('search_map'), { // #search_mapに地図を埋め込む center: nowlocation, //geolocationで取得したポジションを中心を指定 zoom: 18, // 地図のズームを指定 streetViewControl: false, //ストリートビューの非表示 mapTypeControl: false, //mapタイプの切り替え非表示 fullscreenControl: false, //フルスクリーン切り替え不可 zoomControl: true, //ズームコントロール有り zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_BOTTOM //RIGHT_BOTTOMに配置 }, }); markers(); } //マーカー作成 function markers(){ //マーカー毎の処理 for (var i = 0; i < markerData.length; i++) { markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); //緯度経度のデータ作成 marker[i] = new google.maps.Marker({ //マーカーの追加 position: markerLatLng, //マーカーを立てる位置を指定 map: map //マーカーを立てる地図を指定 }) //吹き出しの追加 infoWindow[i] = new google.maps.InfoWindow({ content: '<div class="map_words">' + markerData[i]['name'] + '</div>' //吹き出しに表示する内容 }); //マーカーにクリックイベント追加 markerEvent(i); //i番目のマーカーのオプション設定 marker[i].setOptions({ icon: { url: markerData[i]['icon'], //マーカーの画像を変更 size: new google.maps.Size(50, 50), // アイコン画像の表示させたい範囲(サイズ) origin: new google.maps.Point(0, 0), // アイコン画像の表示させたい範囲の基準点(左上) anchor: new google.maps.Point(0, 49), // アイコン画像内のアンカー点の位置 scaledSize: new google.maps.Size(50, 50) // アイコン画像の実際の表示サイズ } }); } } //現在地取得 function getposition(){ if( navigator.geolocation ) { //geolocationに対応の可否 //watchPositionのオプション設定 var options = { timeout: 20000, //取得タイムアウトまでの時間(ミリ秒:1000分の1秒) maximumAge : 0, //取得済みの位置情報を維持する期間。0にすると常に最新情報取得 enableHighAccuracy: true //精度の高い位置情報を取得。しかし取得までに時間がかかる }; //位置情報取得 var getPosition = navigator.geolocation.getCurrentPosition(success,error,options); //位置情報取得できた場合 function success(position) { alert("success") ;   var nowlocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);   map.panTo(nowlocation); } //エラーの場合 function error(error){ alert("error") ; var errorMessage = "お使いの端末は、GeoLacation APIに対応していません。" ; var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); //経度緯度のデータ作成 map = new google.maps.Map(document.getElementById('search_map'), { center: mapLatLng, zoom: 18, // 地図のズームを指定 streetViewControl: false, //ストリートビューの非表示 mapTypeControl: false, //mapタイプの切り替え非表示 fullscreenControl: false, //フルスクリーン切り替え不可 zoomControl: true, //ズームコントロール有り zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_BOTTOM //RIGHT_BOTTOMに配置 }, }); markers(); } }else{ alert('geolocationに対応した端末ではありません'); } }

該当のソースコード(html)

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <link rel="stylesheet" href="../components/loader.css"> <link rel="stylesheet" href="../css/****.css"> <script src="../components/loader.js"></script> <script src="../js/****.js" defer></script> <script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script> <script src="../js/jquery-3.3.1.min.js"></script> <script> var nowmap; var nowlocation; var mapLatLng; var map; var marker = []; var infoWindow = []; var markerData = [ //マーカーを立てる場所名・緯度・経度 { name: '<a href="****.html"></a>', lat: *******, //緯度 lng: ********, //経度 icon: '../images/*******.png' //マーカーイメージ変更 }, { name: '******', lat: *******, //緯度 lng: ********, //経度 icon: '../images/*********.png' } ]; </script> <body onload="initialize(markerData),getposition()"> ・ ・ <a href="#" id="header_position" onclick="getposition();"> <img src="../images/********.png" alt="" width="50" height="35" class="category_tab"/> </a> ・ ・ <div id="search_map"></div> ・ ・ </body> </html>

試したこと

二台のandroid端末を使い、両方とも現在地取得に時間がかかってしまった。
enableHighAccuracyをfalseに変更したが、あまり効果がなかった

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2018/05/15 01:11

プログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
m.ts10806

2018/05/15 01:13

またGoogleMap以外のページでの速度は体感的にどうでしょうか。
sato1108

2018/05/15 05:21

コード部分修正致しました。ご指摘ありがとうございました。googlemap以外のページは通常通りの速度で問題ないです。
Lhankor_Mhy

2018/05/15 06:35

『15秒から20秒ほどかかってしまう』とのこと、タイムアウトがまさに20秒に設定してあると思うのですが、これを短くするとエラーになりますか?
sato1108

2018/05/15 23:49

エラーにはなります。scriptや実行個所が悪いのか、Monacaや端末自体が悪いのかもわからない状態です
Lhankor_Mhy

2018/05/15 23:54

Monacaを利用せずに、普通にwebページとして実行しても遅いですか?
sato1108

2018/05/16 01:32

webページでの実行は早いです。
Lhankor_Mhy

2018/05/16 01:36

ということは、Monaca環境がないと検証ができないのですね…… すみません、私の手には負えなさそうなので他のご回答者をお待ちください。または、Monacaのフォーラムなどがあれば、そちらでお聞きになるほうが早いかもしれませんね。
sato1108

2018/05/16 05:01

ご丁寧に回答していただきありがとうございました。そうさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問