6. GeoLocationAPI
①位置取得(GeoLocationAPI)
一度だけ取得:navigator.geolocation.getCurrentPosition(success,error,option);
定期的に取得:navigator.geolocation.watchPosition(success,error,option);
// 位置情報を受信した時の処理
function update(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var currentPos = new google.maps.LatLng(lat, lng);
map.setCenter(currentPos);
//位置の探索を終了
navigator.geolocation.clearWatch(wid);
}
13年3月24日日曜日
7. Data Get
var httpObj = createHttpRequest();
httpObj.open("GET",url,true);
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4 && httpObj.status == 200){
if(httpObj.responseText != ""){
obj = eval("("+httpObj.responseText+")");
}
}
httpObj.send(null);
}
$(function() {
$.getJSON("data.json",function(obj){
hoge(obj);
});
});
13年3月24日日曜日
8. Do it yourself
//マーカーの消去は自分で
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
markersArray.push(marker);
//infoWindowの消去も自分で
google.maps.event.addListener(marker, "click", function() {
infowindow = new google.maps.InfoWindow({
content: html
});
if (currentInfoWindow) {
currentInfoWindow.close();
}
infowindow.open(map, marker);
currentInfoWindow = infowindow; 8
});
13年3月24日日曜日
20. Tips : 緯度経度取得
//For Client
rc = map.getBounds();
mapArea = rc.getSouthWest() +","+rc.getNorthEast();
var url = "http://hoge/fuga.php?ll="+mapArea+"&cache="+(new Date()).getTime();
var httpObj = createHttpRequest();
httpObj.open("GET",url,true);
httpObj.send(null);
//For Server
$sql = "SELECT * FROM hoge
where ((lat BETWEEN $swlat and $nelat) and (lng BETWEEN $swlng and $nelng))";
//圧縮送信も効果的
NE(lat,lng)
PHPならob-gzhandler 1行!
SW(lat,lng)
13年3月24日日曜日
28. Recipe8:�スマートフォンサイト対応のUI
① ②
① CSSで100%指定 →一番広く使えるとは限らない!
② JavaScriptでアドレスバーを隠した場合(Scrollto)
13年3月24日日曜日
29. Recipe8:�スマートフォンサイト対応のUI
① ② ③
① CSSで100%指定 →一番広く使えるとは限らない!
② JavaScriptでアドレスバーを隠した場合(Scrollto)
③ ホーム画面からの起動でフルスクリーン表示(blackモード)
13年3月24日日曜日
30. Recipe8:�スマートフォンサイト対応のUI
① ② ③ ④
① CSSで100%指定 →一番広く使えるとは限らない!
② JavaScriptでアドレスバーを隠した場合(Scrollto)
③ ホーム画面からの起動でフルスクリーン表示(blackモード)
④ ホーム画面からの起動でフルスクリーン表示
(black-translucentモード)
13年3月24日日曜日
31. Recipe8:�スマートフォンサイト対応のUI
iPhone4 iPhone5
iPhone4以前のピクセル
指定のままだと 間
<link rel="stylesheet" media="all and (orientation:portrait)" href="iphone5_portrait.css"> //①
<link rel="stylesheet" media="all and (orientation:landscape)" href="iphone5_landscape.css"> //②
① #gmap { ② #gmap {
position : absolute; position : absolute;
top:0px; top:0px;
left:0px; left:0px;
width: 320px; width: 568px;
height:504px; height:268px;
} }
13年3月24日日曜日