Q&A
「できません」というのは、具体的にどうなってしまうのでしょうか。コンソールなどにエラーが出ていましたら、その確認もお願いします。
javascript
1/////////////////////////////////////////////////////////////////////// 2// 変数設定 3/////////////////////////////////////////////////////////////////////// 4var Yucho = { 5 map:{} 6}; 7 8/////////////////////////////////////////////////////////////////////// 9// 初期化 10/////////////////////////////////////////////////////////////////////// 11Yucho.initMap = function(){ 12 13 // googleMaps 初期設定 14 Yucho.gMapInit(); 15 16 // googleMaps アイドル設定 17 Yucho.gMapSetIdle(); 18 19}; 20 21Yucho.gMapInit = function(){ 22 if( navigator.geolocation ) 23 { 24 // 現在地を取得 25 navigator.geolocation.getCurrentPosition( 26 27 // [第1引数] 取得に成功した場合の関数 28 function( position ) 29 { 30 // 取得したデータの整理 31 var data = position.coords ; 32 33 // データの整理 34 var lat = data.latitude ; 35 var lng = data.longitude ; 36 37 Yucho.map = new google.maps.Map(document.getElementById('map'), { 38 center: { 39 lat:lat, 40 lng:lng 41 }, 42 zoom: Yucho.defZoom, 43 minZoom: Yucho.defminZoom 44 }); 45 }, 46・ 47・ 48・
Yucho.map = new google.maps.Map(document.getElementById('map')
のYucho.mapを
javascript
1var Yucho = { 2 map:{} 3};
に格納したいのですが、できません。。。
どこが間違っていますか？
よろしくお願いいたします。
#####追記
エラーはでていないのですが、
console.log(Yucho.map);としても、Object {}となります。
javascript
1/////////////////////////////////////////////////////////////////////// 2// googleMaps アイドル設定 3/////////////////////////////////////////////////////////////////////// 4Yucho.gMapSetIdle = function(){ 5 console.log(Yucho.map); 6 google.maps.event.addListener(Yucho.map, 'idle', function(){ 7 Yucho.refleshMap(); 8 }); 9};
正常に取得できている場合は以下がYucho.mapに入っています。
javascript
1//コンソール内容 2Ag {gm_bindings_: Object, __gm: eg, gm_accessors_: Object, center: _.D, zoom: 10…}
######正常にデータ格納ができている場合のコード
javascript
1Yucho.gMapInit = function(){ 2 Yucho.map = new google.maps.Map(document.getElementById('map'), { 3 center: { 4 lat: Yucho.defLat, 5 lng: Yucho.defLng 6 }, 7 zoom: Yucho.defZoom, 8 minZoom: Yucho.defminZoom 9 }); 10};
######データ格納ができていない場合のコード（現在地が取得できる場合）
javascript
1Yucho.gMapInit = function(){ 2 if( navigator.geolocation ) 3 { 4 // 現在地を取得 5 navigator.geolocation.getCurrentPosition( 6 7 // [第1引数] 取得に成功した場合の関数 8 function( position ) 9 { 10 // 取得したデータの整理 11 var data = position.coords ; 12 13 // データの整理 14 var lat = data.latitude ; 15 var lng = data.longitude ; 16 17 Yucho.map = new google.maps.Map(document.getElementById('map'), { 18 center: { 19 lat:lat, 20 lng:lng 21 }, 22 zoom: Yucho.defZoom, 23 minZoom: Yucho.defminZoom 24 }); 25 26 }, 27 28 // [第2引数] 取得に失敗した場合の関数 29 function( error ) 30 { 31 // エラーコード(error.code)の番号 32 // 0:UNKNOWN_ERROR 原因不明のエラー 33 // 1:PERMISSION_DENIED 利用者が位置情報の取得を許可しなかった 34 // 2:POSITION_UNAVAILABLE 電波状況などで位置情報が取得できなかった 35 // 3:TIMEOUT 位置情報の取得に時間がかかり過ぎた… 36 37 // エラー番号に対応したメッセージ 38 var errorInfo = [ 39 "原因不明のエラーが発生しました…。" , 40 "位置情報の取得が許可されませんでした…。" , 41 "電波状況などで位置情報が取得できませんでした…。" , 42 "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。" 43 ] ; 44 45 // エラー番号 46 var errorNo = error.code ; 47 var errorMessage = errorInfo[ errorNo ] ; 48 49 alert( errorMessage ) ; 50 }, 51 52 // [第3引数] オプション 53 { 54 "enableHighAccuracy": false, 55 "timeout": 8000, 56 "maximumAge": 2000, 57 } 58 ); 59 }else{ 60 //現在地が取得できなかったらデフォルト表示 61 Yucho.map = new google.maps.Map(document.getElementById('map'), { 62 center: { 63 lat: Yucho.defLat, 64 lng: Yucho.defLng 65 }, 66 zoom: Yucho.defZoom, 67 minZoom: Yucho.defminZoom 68 }); 69 } 70};
回答1件
0
ベストアンサー
navigator.geolocation.getCurrentPosition が非同期だからだと思います。
JavaScript
1Yucho.initMap = function(){ 2 3 // googleMaps 初期設定 4 Yucho.gMapInit(); 5 6 // googleMaps アイドル設定 7// Yucho.gMapSetIdle(); // これを「Yucho.map = new･･･」のあとに移す。 8 9}; 10
投稿2017/03/29 09:31
総合スコア69407
ありがとうございます。。できました。
>>>navigator.geolocation.getCurrentPosition が非同期とは、具体的にどういう問題でしょうか？
後学のために教えていただけると幸いです。
「JavaScript 非同期」で検索してもらうとして、
Yucho.gMapInit(); が実行されるタイミングで navigator.geolocation.getCurrentPosition に渡した関数がまだ実行されていないということです。
ご説明ありがとうございます＞＜
あなたの回答
tips
プレビュー
