前提・実現したいこと
以前も似たような質問をさせていただいたのですが、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/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/21 02:12
2018/06/25 14:10