- ベストアンサー
JavaScriptでループをする際に変数の値を正しく取得できない理由について
- JavaScriptのwatchPositionで位置情報を取得し、条件に応じて地図を表示させたいが、ループ内で変数の値を正しく取得できない。
- watchPositionでは正しく値を取得しているが、map_draw関数の中では最初の一回目の値しか取得できず、後は値が変わらない。
- ループ内での変数の取得方法に問題がある可能性があり、それについて教えてほしい。
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 提示されたロジックですとボタンをクリックした際にseidoが6以上の場合、再度map_draw()を呼びますが(想定通りだと思いますが)無限ループみたいなものですので、ブラウザがかたまります。 map_draw()に入ってまたmap_draw()を呼んでいるわけです。 seidoの値が取れないのはそのせいです。 updateは定期的に(測位後)呼ばれるわけですのでそのタイミングでseidoの値が5以下であればmap_draw()を呼べば良いのではないでしょうか？ 以下のような感じで試しました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script> var lat; var lng; var acc; var map; // ボタンが押された保持 var isDraw = false; window.onload = function(){ btn = document.getElementById('btn-draw'); // ボタンが押された場合はisDrawをtrueに変更する btn.addEventListener ( 'click', function() { isDraw = true; }, false ); navigator.geolocation.watchPosition ( update, poserror, { maximumAge: 0, enableHighAccuracy:1 } ); } function drawMap () { // 緯度経度を取得 var latLng = new google.maps.LatLng ( lat, lng ); if ( !map ) { // まだマップが生成されていなかったらマップを生成 var options = { zoom: 17, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map ( document.getElementById('map'), options ); } // マップの中心を取得した緯度経度で表示 map.setCenter ( latLng ); } function poserror() { alert ( 'error' ); } function update ( position ) { // ボタンの状態を表示 document.getElementById('status').innerHTML = 'button:' + isDraw; // 測位情報を取得 lat = position.coords.latitude; lng = position.coords.longitude; acc = position.coords.accuracy; var html = 'Lat = ' + lat + 'Lng = ' + lng + 'Acc = ' + acc; html += '<br />' + ( new Date() ); document.getElementById('pos').innerHTML = html; // isDrawがtrue（すなわちボタンが押されている) // かつ、acc(精度)が5以下の場合にdrawMap（）を呼んで地図を表示 if ( isDraw && acc =< 5 ) { drawMap(); } } </script> <style> #map { width: 600px; height: 600px; } </style> </head> <body> <header> <button id="btn-draw">地図を表示</button> <div id="status"></div> <div id="pos"></div> </header> <div id="map"></div> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
if(seido>5){ map_draw(); } ↓↓ if(seido>5){ setTimeout(map_draw, 100); } とかではダメでしょうか？ (一定時間でタイムアウトするようにしておいた方が良さそうですが…）
お礼
ありがとうございました。タイムアウトする方法もあったんですね。試してみます。
お礼
ありがとうございました。教えていただいた内容を参考にして、上手くいきました。また、何かの際にはよろしくお願いします。