◆Google Maps JavaScript API V3 + Geolocation (watchPosition+clearWatch)
iPhone(アイフォン)の地図が見れるようになりました。自分の座標位置をGPS情報から収得できるようにもなりました。
しかし、以前に学んだwatchPositionとcurrentPositionだけでは、iPhone(アイフォン)用として使いにくいことが判明。
getcurrentPosition()では、収得できる座標の制度が悪すぎる。100m近くずれることがあります。
一方、watchPosition()を使うと、Google Mapで位置をずらすと数秒後に現在地に戻されてゆっくり地図を見ることもできません。
さて、どうすればいい?
完成したサンプルは、次のようなイメージ。左が追跡中。右がGeoLocation(地理位置座標サービス)の停止中。
詳しくは、下記参照。
◆iPhone(アイフォン)Google Map アプリの動作を実現したい。
iPhone(アイフォン)用アプリのGoogle Mapは、地図をスライドさせると現在地の表示が停止され、マップ上の現在地を収得するボタンを押すと現在地を再び示すようになります。
これがやりたい!
・・・・と言うわけで、”W3C Geolocation 規格”にあるclearWatch()を使い、watchpositionを停止させこれを実現します。
まずは、現在地を追跡中のwatchPositionを停止させるclearWatch()のscriptをどのようにして実現するかですが、これにはマップイベントのdragendを使います。
addListener() イベント ハンドラで地図のdragendイベントをclearWatch()へ渡してやりましょう。
これで、地図をドラッグして動かすと、watchPositionが解除されます。
google.maps.event.addListener(map, 'dragend', function() //◆地図を移動(ドラッグ)するとclearWatch { if (watchId > 0) { navigator.geolocation.clearWatch(watchId); } });
うんで、今度は現在位置を再度追跡開始するためのスタートボタンを設けて、Google先生のGeolocationコードの先頭から走らせるようにします。
function startLocationTracking(){ divblock('inside');//◆watchPosition gif表示 divblock('mylocation');//◆mylocation表示 //◆座標収得 if(navigator.geolocation) { browserSupportFlag = true; watchId = navigator.geolocation.watchPosition(function(position) { initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); showCurrentLocation(position);//◆現在地座標表示 currentMarker();//◆現在地軌跡マーカー表示 }, function() { handleNoGeolocation(browserSupportFlag); }); } else if (google.gears) { browserSupportFlag = true; var geo = google.gears.factory.create('beta.geolocation'); watchId = geo.watchPosition(function(position) { initialLocation = new google.maps.LatLng(position.latitude,position.longitude); map.setCenter(initialLocation); showCurrentLocation(position);//◆現在地座標表示 currentMarker();//◆現在地軌跡マーカー表示 }, function() { handleNoGeolocation(browserSupportFlag); }); } else { // Browser doesn't support Geolocation browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } google.maps.event.addListener(map, 'dragend', function() //◆地図を移動(ドラッグ)するとclearWatch { if (watchId > 0) { navigator.geolocation.clearWatch(watchId); } }); }
<input type="button" value="現在位置を追跡" onclick="startLocationTracking()" style="width : 100%;" />
最後に、watchPositionが動作中であるアニメーション等を入れ込んで完成。
うーむ。iPhone(アイフォン)用google Mapに動作が近くなったかな。
◆Google Maps API V3+ Geolocation (watchPosition+clearWatch)サンプル地図
◆参照サイト
- Google Geolocationサンプル
- tutorialspoint.com Geolocation clearWatch() API・・・・・clearWatch Demo
- Random Snippets (How to hide, show, or toggle your div)・・・・・<div></div>の表示・非表示
◆Google Maps JavaScript API V3
関連記事一覧
スポンサードリンク
1 Comments.