Más contenido relacionado La actualidad más candente (11) Similar a HTML5勉強会#23_GeoHex (20) Más de Tadayasu Sasada (8) HTML5勉強会#23_GeoHex1. HTML5
2011.11.16
CC BY-SA(@sa2da)
14. navigator.geolocation.getCurr
entPosition(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
20. <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>
21. <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 doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn't 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>
26. GPS m 1km
IP 5km
Wi-Fi 10m 300m
100m 5km
27. GPS
GPS/Wi-Fi
IP
Wi-Fi
Wi-Fi
GPS/Wi-Fi
33. × getCurrentPosition()
watchPosition()
61. ⽤用 ⾮非 ⽤用
⽤用
⼆二
⽤用 ⽤用 ⽤用
⼈人⽤用 ⽤用 ⽣生
⽤用
⽤用
⽤用 ⼊入
⼊入 ⽤用
62. CC CC N
BY-SA BY-SA
N
CC N
BY-SA
N
⼆二 ⼆二 ⽤用
⼀一
⾃自 ⽣生 ⽬目
69. <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');
}
70. <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>
71. <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);