JavaScriptによるgoogle maps apiの使い方
0 likes761 views
JavaScriptによるGPSの利用 Google Maps ApiのJavaScript利用
More Related Content
More from Yossy Taka (16)
Recently uploaded (11)
JavaScriptによるgoogle maps apiの使い方
- 1. Google Maps API JavaScriptによる Google Map カスタマイズ
- 2. Copyright ? Yoshihiro Takahashi 2012 All Rights Reserved. 2 JavaScriptによる Google Maps の活用
- 3. Copyright ? Yoshihiro Takahashi 2012 All Rights Reserved. 3 まずはGPSの確認
- 4. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 4 GPSの利用 ? ブラウザのGPS利用可否判断 – navigator.geolocation ? If文で判断します。 ? GPSの利用 – getCurrentPosition(success, error, options) ? ユーザーの現在の位置情報を一回だけ取得する – watchPosition(success, error, options) ? ユーザーの位置情報を定期的に監視する – clearWatch(id) ? watchPosition()による位置情報の監視をクリアする
- 5. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 5 GPSの利用 ? getCurrentPosition(success, error, options) – メソッド内にsuccess関数、error関数、オプションを 設定 ? GPSの値取得方法 – success関数の引数.coords.プロパティ ? エラーの使用方法 – error関数の引数.codeの値を利用 ? １：位置情報の利用が許可されていません ? ２：デバイスの位置が判定できません ? ３：タイムアウト – error関数の引数. messageの値 ? エラー内容の詳細を返す
- 6. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 6 GPSの利用 ? オプションの設定 – enableHighAccuracy ? より精度の高い位置情報を取得する（true, false） ? trueにすると消費電力増、取得時間長 – Timeout ? タイムアウトまでの時間（単位：ミリ秒） – maximumAge ? 位置情報の有効期限（単位：ミリ秒） ? 記述例 – getCurrentPosition(success, error, { enableHighAccuracy : true, timeout : 6000, maximumAge : 600000 });
- 7. Copyright ? Yoshihiro Takahashi 2012 All Rights Reserved. 7 Google Maps の活用
- 8. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 8 GoogleMapの利用（カンタン） ? 現在位置をGoogleMapアプリに渡す 1. 現在位置情報を取得 2. 取得した位置をhttp://maps.google.comに渡す ? 記述例 “http://maps.google.com/maps?q=” + 緯度+ “,” + 経度;
- 9. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 9 Google Maps API の利用 ? Google Maps API V3の確認 – https://developers.google.com/maps/documentation/javascript/?hl=ja – 詳しくはリファレンスを参照
- 10. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 10 Mapの表示 1. Google Maps APIの読み込み 2. LatLng(緯度, 経度)：緯度, 経度の設定 3. Map(mapタグ, MapOptions)：地図の表示 4. Marker(MarkerOptions)：マーカーの表示
- 11. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 11 Mapの利用例 ? new google.maps.Map(タグオブジェクト, Options); ? 主なオプションの設定 – var Options = { zoom:数字※大きいほど拡大, center: new google.maps.LatLng(緯度,経度), mapTypeId:google.maps.MapTypeId.ROADMAP }
- 12. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 12 Markerの利用例 ? new google.maps.Marker(markerOptions); ? 主なオプションの設定 – var markerOptions = { position: new google.maps.LatLng(緯度,経度), map: googleMapオブジェクト }
- 13. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 13 マップコントールについて mapTypeControl overviewMapControl panControl zoomControl streetViewControl
- 14. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 14 軌跡描画 ? ポリラインの利用 – ポリラインは、地図上に各座標をつなぐ線を描画 ? 記述例 – var オブジェクト=new google.maps.Polyline({ path: 緯度経度配列, //ポリラインの配列 strokeColor: ‘#FF0000’, //色（#RRGGBB形式） strokeOpacity: 1.0, //透明度 0.0～1.0 strokeWeight: 2 //太さ（単位ピクセル） }); オブジェクト.setMap(マップオブジェクト)
- 15. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 15 住所 → 緯度経度変換 ? geocoderの利用 – オブジェクト.geocode(“場所”); で、住所 → 緯度経度 変換が利用できる – 必ずステータスを確認し、 google.maps.GeocoderStatus.OK で変換が成功したことを確認する
- 16. Copyright ? Yoshihiro Takahashi 2011 All Rights Reserved. 16 クリックによる緯度経度の取得 ? マウスイベント – google.maps.event.addListenerというイベ ントで、LatLng (緯度,経度）を取得できる – クリックした場所にマーカーを配置できる