Archive

Posts Tagged ‘JavaScript’

Chromeで位置情報取得

12月 10th, 2009
No comments

先日、Firefoxで位置情報を取得するnavigator.geolocationを紹介しましたが、それのChrome版です
＃Chrome版というか、呼び出しているAPIはFirefoxと同等なので結果も全く同じになります
windowsのでは動きましたがLinux版では動きませんでした；

PLAIN TEXT
JAVASCRIPT:
  1. // これをロードしとく
  2. <script type="text/javascript" src="http://code.google.com/intl/ja/apis/gears/gears_init.js"></script>
  3.  
  4. // browserに応じて使い分け
  5. var geo;
  6. // for firefox and mobile safari
  7. if(navigator.geolocation)
  8.   geo = navigator.geolocation;
  9. // for google chrome(win) and Chrome Lite(Android)
  10. else if(window.google && google.gears)
  11.   geo = google.gears.factory.create('beta.geolocation');
  12. if(geo)
  13.   geo.getCurrentPosition(-省略-);
  14. else
  15.   alert('geolocation disabled...');

,

GoogleMapsAPI V3

11月 26th, 2009
No comments

今更ながらver3が存在することを知りました；
ver2.xと比べて大分シンプルになったようです
最大の違いはiPhoneやandroid向けにも最適化されている点です

Map V3 Tutorial - Google Maps JavaScript API V3 - Google Code
Google Maps API V3 Reference - Google Maps JavaScript API V3 - Google Code

毎度のごとく仕様はかなり変わっているので、
とりあえずチュートリアルとリファレンスを読んで勉強し直そうと思います

,

navigator.geolocation.getCurrentPositionのキャッシュ時間

11月 19th, 2009
No comments

con_mameさんに教えて頂きました
navigator.geolocation.getCurrentPositionの結果はキャッシュされていて、
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
のoptionsにmaximumAgeをミリ秒単位で指定すると、
その時間が経過したときにキャッシュが破棄されます（0だと毎回取得し直す）
他にもtimeoutの指定も出来るようです

ブラウザで位置情報取得

10月 4th, 2009
No comments

Firefox 3.5 からは、位置情報通知機能 (Geolocation API) が標準搭載に - Cirius Lab. ブログ

凄く簡単に出来ました！
ただし精度はイマイチ…普通の家庭用Wifiだし、しょうがないか；
iPhoneでも同じコードで動くらしいのでtouchでも動くと期待
大学や公衆無線LANなら多分位置情報を持ってると思うので、今度試してみようと思います

windowサイズ変更時の処理

9月 16th, 2009
No comments

最近googleMapsAPIで地図を使った研究をしているのですが、
windowサイズを変えたり、ページ下段にFirebugを表示した際に要素のサイズを変える処理が欲しくなりました
javascriptではonload（ページ読み込み時のイベント）や、
onresize（ページ領域変更時のイベント）が用意されています
これらを使ったサンプルがこちら（Firefox3.5でしか試してません）
id=map_elementをページの半分にだけ表示します

PLAIN TEXT
JAVASCRIPT:
  1. window.onload = function(){
  2.   //コメント部はgoogleMapsAPIを使用している場合
  3.   //mapの初期化処理は省略
  4.   //map = new GMap2($("map_element"));
  5.   setHalfSize();
  6. }
  7. window.onresize = function(){
  8.   //var center = map.getCenter();
  9.   //var point = new GLatLng(center.lat(), center.lng());
  10.   setHalfSize();
  11.   //checkResizeを呼んでサイズ変更をAPIに通知しておくと、その後の移動を宜しくやってくれる
  12.   //map.checkResize();
  13.   //map.panTo(point);
  14. }
  15. function setHalfSize(){
  16.   $('map_element').style.width = innerWidth / 2;
  17.   $('map_element').style.height = innerHeight;
  18. }

ようはページ読み込み時とページ内領域サイズ変更時にサイズがfitするような処理を仕込めばいいことになります
googleMapsの場合は中心位置もサイズに合わせて維持させてやると使いやすくなると思います
blog@slightlyblue: GoogleMapsブラウザリサイズ時のイベント処理でcheckResizeする！
を参考にmapの中央位置をリサイズ後も維持出来るようにしました

,