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

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

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

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

JavaScript

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

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

646閲覧

androidの現在地取得(geolocation)

sato1108

総合スコア14

HTML5

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

JavaScript

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

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

2クリップ

投稿2018/05/29 04:12

編集2018/06/05 02:43

前提・実現したいこと

以前も似たような質問をさせていただいたのですが、Monacaでハイブリッドアプリケーションを作成しており地図を表示させ現在地を取得するようにしたいと思っています。

以前同じような質問をさせていただいた際はandroid端末で20秒程まてば現在地を取得できたときもあったのですが、それでは使い物にならなかったので、今回は以前と少し違うソースを書いています。
しかし今回のソースでは現在地の取得もできなくなり、地図が表示されなくなりました。(iOSでは即座に現在地を取得し表示してくれます)

androidの方に問題があると思うのですが、何か考えられる可能性はありますでしょうか。

下記に以前させていただいた質問のURLも記載します。
https://teratail.com/questions/126036

該当のソースコード

js

1(angularJS) 2 3 document.addEventListener("deviceready", onDeviceReady, false); 4 function onDeviceReady() { 5 console.log("navigator.geolocation works well"); 6 } 7 8 $scope.initialize = function (){ 9 10 var mapDiv = document.getElementById("map_canvas"); 11 var latitude = null; 12 var longitude = null; 13 14 // 位置情報取得オブジェクトチェック 15 if (!navigator.geolocation){ 16 mapDiv.innerHTML = "Geolocation 使用不可"; 17 return; 18 } 19 20 // 位置情報取得オブジェクトオプション 21 var option = { 22 //timeout:10000, // タイムアウト 23 enableHighAccuracy:true // GPS利用 24 } 25 26 // 位置情報を取得 27 navigator.geolocation.getCurrentPosition(success, error, option); 28 29 // 位置情報取得成功時 30 function success(position){ 31 latitude = position.coords.latitude; 32 longitude = position.coords.longitude; 33 34 // GoogleMapにデータを渡す 35 var mapCenter = new google.maps.LatLng(latitude, longitude); 36 var options = { 37 zoom:16, // 表示倍率 38 center:mapCenter, // 中央位置 39 mapTypeId:google.maps.MapTypeId.ROADMAP, 40 scaleControl:true // 倍率変更 41 }; 42 // 地図を表示 43 var map = new google.maps.Map(mapDiv, options); 44 45 // 現在地を表示 46 var marker = new google.maps.Marker({ 47 position:mapCenter, 48 map:map, 49 title:"現在地"} 50 ); 51 map.setCenter(mapCenter); 52 } 53 54 // 位置情報取得失敗時 55 function error(error){ 56 mapDiv.innerHTML = error.message; 57 } 58 59 }; 60

html

1search.html 2 3<ons-page id="search.html"> 4 <ons-toolbar> 5 <div class="center">title</div> 6 </div> 7 </ons-toolbar> 8 <div id="map_canvas"></div> 9</ons-page>

html

1index.html 2 3<head> 4<> 5<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script> 6<> 7</head> 8 9 10<ons-template id="mainmenu.html"> 11 <ons-page> 12 <!--タブバー--> 13 <ons-tabbar position="bottom"> 14 <ons-tab label="マップ" icon="fa-home" page="search_shopTab.html" ng-click="initialize()"> 15 </ons-tab> 16 <ons-tab label="ポイント" icon="fa-product-hunt" page="pointTab.html"> 17 </ons-tab> 18 </ons-tabbar> 19 </ons-page> 20</ons-template>

試したこと

android複数の端末を使い確認しましたが、映りませんでした。

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

似たものを作ろうとしているので、お互い頑張りましょう。

対策

20秒程まてば現在地を取得できたときもあったのですが、

Timeoutを設定しないとデフォはInfinityなので、位置情報が得られるまで延々と待ち続けるのでは?
以下を見たほうがいいと思います。
https://developer.mozilla.org/ja/docs/Web/API/PositionOptions

…以下を見ると仕様っぽいですね。
https://docs.monaca.io/ja/reference/cordova_6.5/geolocation/#navigator-geolocation-getcurrentposition

恒久対処

geolocation.watchPositionを使ってaccuracyが目標の範囲内に収まったら
watchPositionを打ち切れば、最初は大体の位置→徐々に正しい位置に収束していく…と思います。
http://blog.asial.co.jp/1004

ある程度動いたら、ソースを見せていただけると嬉しいです。

投稿2018/06/18 09:41

oikashinoa

総合スコア2826

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

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

sato1108

2018/06/21 02:12

ありがとうございます。 試してみたいと思います!
oikashinoa

2018/06/25 14:10

[Geolocation APIを用いた高精度な位置情報取得|youcune.com](https://youcune.com/2012/01/12/221628/) 目的の精度、もしくはタイムアウトで打ち切るものが有りました。 ただ、&とか文字化けしているので、直してここにUpして頂けると嬉しいです(^^;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問