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

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

ただいまの
回答率

90.75%

  • JavaScript

    15230questions

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

  • HTML5

    3708questions

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

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 218

sato1108

score 6

 前提・実現したいこと

現在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/ツールのバージョンなど)

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • sato1108

    2018/05/16 10:32

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

    キャンセル

  • Lhankor_Mhy

    2018/05/16 10:36

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

    キャンセル

  • sato1108

    2018/05/16 14:01

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

    キャンセル

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

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15230questions

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

  • HTML5

    3708questions

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