javascriptで困っています。教えてください

解決済

質問者：dkong
質問日時：2013/07/24 15:49
回答数：2件

読み込まれたら、watchPositionで位置情報を取得し続け、ボタンを押したタイミングでmap_draw関数を実行して、地図を表示させようと思っています。そのときseidoが５以下のときだけ地図を表示させたいので、seidoが５より大きいときは、map_draw関数をもう一度呼び出すループを考えました。しかし、watchPositionではきちんとseido = position.coords.accuracy;の値がとれており、５以下になっているのですが、map_draw関数のなかでseidoの変数をうまく取得できません。map_draw関数では最初の一回目だけ取得して、後は値が変わりません。ループの部分に問題があるのでしょうか？教えていただければと思い投稿しました。よろしくお願いします。

<html>
<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&l …
<script type="text/javascript" charset="utf-8">
var ido;
var keido ;
var seido ;
var map;
var btn;

window.onload = function(){
btn = document.getElementById("btn");
btn.addEventListener('click', map_draw, false);

navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1});

}

function update(position){
ido = position.coords.latitude;
keido = position.coords.longitude;
seido = position.coords.accuracy;
　　　　　　　　
　　var htmlTxt = "Lat." + ido + "Lng" + keido+ "Acc" + seido;
htmlTxt += "<br>"+(new Date());
var pos = document.getElementById("pos");
pos.innerHTML = htmlTxt;

}

function poserror(position){
alert("error");
　　　　　　　　}

function map_draw(){

if(seido>5){

map_draw();

}else{

　var lat = ido;
　var lng = keido;
　var Latlng = new google.maps.LatLng( lat , lng );

var myOptions = {
　zoom: 17,
　center: Latlng,
　mapTypeId: google.maps.MapTypeId.ROADMAP
　 };

map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

}
}
</script>
</head>
<body>
<p id="pos">情報</p>
<div id="map_canvas" style="width:480px; height:640px;">地図</div>
<button id="btn">地図を描く</button>

</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2013/07/25 09:02

こんにちは。

提示されたロジックですとボタンをクリックした際に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&l …
<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>