Your SlideShare is downloading. ×
HTML5        2011.11.16    CC BY-SA(@sa2da)
@ sa 2 d a
O’ReillyW here2.0 2010            @sa2da
@IT 2011.8             @sa2da
⽇日
⽇日
http://www.w3.org/TR/  geolocation-API/
JavaScript ← Location
Safari#import <CoreLocation/CoreLocation.h>   GeoLocationAPI                coreLocationFramework           OS
navigator.geolocation.getCurrentPosition(successCallback,       errorCallback);
navigator.geolocation.getCurrentPosition(successCallback,       errorCallback);function errorCallback(error)function succe...
navigator.geolocation.getCurrentPosition(successCallback,       errorCallback);function successCallback(position)  coordin...
navigator.geolocation.getCurrentPosition(successCallback,       errorCallback);function errorCallback(error)     error.cod...
navigator.geolocation.*****(); getCurrentPosition();   ! watchPosition();   ! clearWatch();   !watchPosition()watchID = na...
⽇日
<script type="text/javascript"        src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>※V3API   API      ...
<div id="map_canvas"></div>        ※   CSS        html, body {          height: 100%;        }        #map_canvas {       ...
<script type="text/javascript">  var map;  function initialize() {    var myOptions = {       zoom: 6,       mapTypeId: go...
<script type="text/javascript">  var map;  function initialize() {    var myOptions = {       zoom: 6,       mapTypeId: go...
⽇日
Safari#import <CoreLocation/CoreLocation.h>    GeoLocationAPI                coreLocationFramework           OSGPS        ...
GPS      m 1km IP      5kmWi-Fi   10m 300m         100m 5km
GPS        GPS/Wi-Fi IPWi-Fi        Wi-Fi        GPS/Wi-Fi
position.coords.latitude:position.coords.longitude:position.coords.altitude:     mposition.coords.accuracy:            mpo...
position.coords.latitude:position.coords.longitude:position.coords.accuracy:                    m                         ...
position.coords.latitude:position.coords.longitude:position.coords.altitude:     mposition.coords.accuracy:            mpo...
Safari#import <CoreLocation/CoreLocation.h>    GeoLocationAPI                coreLocationFramework           OSGPS        ...
×   getCurrentPosition()    watchPosition()
watchPosition()clearWatch()
ON/OFFGPS ON/OFFWi-Fi   ON/OFFJavaScript ON/OFF
ON/OFFGPS ON/OFF     ※iPhoneWi-Fi   ON/OFFJavaScript ON/OFF
⽇日
⽇日
⾒見見
SEO
http://miniapps.co.uk/geometer/
⽇日
35.76643787028846139.63561688507       10cm
20(+/-)n byte           35.60970, 139.74828                                 pinpoint
Zone: quhNzoV
Level:0   Level:25
⾕谷⾕谷
⽤用   ⾮非   ⽤用                         ⽤用                              ⼆二⽤用   ⽤用        ⽤用          ⼈人⽤用      ⽤用            ...
CC                           CC           N     BY-SA                        BY-SA                                        ...
⽇日
UNTIC.JP
UNT
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
<script src="http://geohex.net/gm.js" type="text/javascript" content="text/html;charset=utf-8"></script>function initializ...
<style type="text/css">    @-webkit-keyframes mycolor {$ 0%$ {                right:100%;$ $ }$ 100%$ {                rig...
<script src="http://geohex.net/hex_v3.01_core.js" type="text/javascript" content="text/html;charset=utf-8"></script><scrip...
⼩小
⾦金金
⽥田
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
Upcoming SlideShare
Loading in...5
×

HTML5勉強会#23_GeoHex

10,752

Published on

HTML5勉強会#23で使用した資料です。

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,752
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5勉強会#23_GeoHex"

  1. 1. HTML5 2011.11.16 CC BY-SA(@sa2da)
  2. 2. @ sa 2 d a
  3. 3. O’ReillyW here2.0 2010 @sa2da
  4. 4. @IT 2011.8 @sa2da
  5. 5. ⽇日
  6. 6. ⽇日
  7. 7. http://www.w3.org/TR/ geolocation-API/
  8. 8. JavaScript ← Location
  9. 9. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OS
  10. 10. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
  11. 11. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function errorCallback(error)function successCallback(position)
  12. 12. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function successCallback(position) coordinates position.coords.latitude: position.coords.longitude: position.coords.altitude: m position.coords.accuracy: m position.coords.altitudeAccuracy: m position.coords.heading: position.coords.speed: m/s ※HTML
  13. 13. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function errorCallback(error) error.code: 1 PERMISSION_DENIED 2 POSITION_UNAVAILABLE 3 TIMEOUT
  14. 14. navigator.geolocation.*****(); getCurrentPosition(); ! watchPosition(); ! clearWatch(); !watchPosition()watchID = navigator.geolocation.watchPosition(); 1navigator.geolocation.clearWatch(watchID);
  15. 15. ⽇日
  16. 16. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>※V3API API OK
  17. 17. <div id="map_canvas"></div> ※ CSS html, body { height: 100%; } #map_canvas { height: 100%; }
  18. 18. <script type="text/javascript"> var map; function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(map_canvas), myOptions); geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(successCallback, errorCallback); } function successCallback(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(pos); } function errorCallback(){ } } google.maps.event.addDomListener(window, load, initialize);</script>
  19. 19. <script type="text/javascript"> var map; function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(map_canvas), myOptions); // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: Location found using HTML5. }); map.setCenter(pos); successCallback }, function() { handleNoGeolocation(true); }); } else { errorCallback // Browser doesnt support Geolocation handleNoGeolocation(false); } } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = Error: The Geolocation service failed.; } else { var content = Error: Your browser doesnt support geolocation.; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } google.maps.event.addDomListener(window, load, initialize);</script>
  20. 20. ⽇日
  21. 21. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OSGPS IP Wi-Fi
  22. 22. GPS m 1km IP 5kmWi-Fi 10m 300m 100m 5km
  23. 23. GPS GPS/Wi-Fi IPWi-Fi Wi-Fi GPS/Wi-Fi
  24. 24. position.coords.latitude:position.coords.longitude:position.coords.altitude: mposition.coords.accuracy: mposition.coords.altitudeAccuracy: mposition.coords.heading:position.coords.speed: m/s
  25. 25. position.coords.latitude:position.coords.longitude:position.coords.accuracy: m × accuracy accuracy
  26. 26. position.coords.latitude:position.coords.longitude:position.coords.altitude: mposition.coords.accuracy: mposition.coords.altitudeAccuracy: mposition.coords.heading:position.coords.speed: m/s GPS
  27. 27. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OSGPS IP Wi-Fi
  28. 28. × getCurrentPosition() watchPosition()
  29. 29. watchPosition()clearWatch()
  30. 30. ON/OFFGPS ON/OFFWi-Fi ON/OFFJavaScript ON/OFF
  31. 31. ON/OFFGPS ON/OFF ※iPhoneWi-Fi ON/OFFJavaScript ON/OFF
  32. 32. ⽇日
  33. 33. ⽇日
  34. 34. ⾒見見
  35. 35. SEO
  36. 36. http://miniapps.co.uk/geometer/
  37. 37. ⽇日
  38. 38. 35.76643787028846139.63561688507 10cm
  39. 39. 20(+/-)n byte 35.60970, 139.74828 pinpoint
  40. 40. Zone: quhNzoV
  41. 41. Level:0 Level:25
  42. 42. ⾕谷⾕谷
  43. 43. ⽤用 ⾮非 ⽤用 ⽤用 ⼆二⽤用 ⽤用 ⽤用 ⼈人⽤用 ⽤用 ⽣生⽤用 ⽤用⽤用 ⼊入⼊入 ⽤用
  44. 44. CC CC N BY-SA BY-SA N CC N BY-SA N⼆二 ⼆二 ⽤用 ⼀一 ⾃自 ⽣生 ⽬目
  45. 45. ⽇日
  46. 46. UNTIC.JP
  47. 47. UNT
  48. 48. http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  49. 49. <script src="http://geohex.net/gm.js" type="text/javascript" content="text/html;charset=utf-8"></script>function initialize() { var gMapType = new google.maps.StyledMapType(stylez,    {name: "green"});  // Create a map object, and include the MapTypeId to add  // to the map type control.  var mapOptions = {    zoom: 11,    mapTypeControlOptions: {      mapTypeIds: [google.maps.MapTypeId.ROADMAP, green]    }  };  var map = new google.maps.Map(document.getElementById(map_canvas),    mapOptions);  //Associate the styled map with the MapTypeId and set it to display.  map.mapTypes.set(green, gMapType);  map.setMapTypeId(green);}
  50. 50. <style type="text/css"> @-webkit-keyframes mycolor {$ 0%$ { right:100%;$ $ }$ 100%$ { right:-45%;$ $ }$ } #gradation$ {$ position: absolute;$ top:0px;$ z-index:10; width: 50%;$ height:100%; -webkit-animation-name: mycolor; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(0,204,0,0.5)));$ }</style><div id="gradation"></div>
  51. 51. <script src="http://geohex.net/hex_v3.01_core.js" type="text/javascript" content="text/html;charset=utf-8"></script><script src="http://geohex.net/hex_v2_gmap3.js" type="text/javascript" content="text/html;charset=utf-8"></script>var zone = GeoHex.getZoneByLocation(position.coords.latitude,position.coords.longitude,level);var zone_center =new google.maps.LatLng(zone.lat , zone.lon );zone.drawHex(map, {linecolor:"#FF0000",fillcolor:"#FF0000",popinfo:1});map.setCenter(zone_center);
  52. 52. ⼩小
  53. 53. ⾦金金
  54. 54. ⽥田

×