HTML5: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
 
 
== HTML5 - Geolocation ==
 
== HTML5 - Geolocation ==
 
=== Links ===
 
=== Links ===
Zeile 92: Zeile 91:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
 +
== HTML5 Vektorgrafik ==
 +
 +
http://raphaeljs.com/

Version vom 22. Oktober 2014, 11:58 Uhr

HTML5 - Geolocation

Links

http://developersmix.wordpress.com/2011/08/16/html5-geolocation/

   http://web.drsni.com/html5-geolocation/
   http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/
   http://aiminstitute.org/blog/2010/07/basic-geolocation-in-html5/
   http://www.mozilla.com/en-US/firefox/geolocation/


HTML 5 - allgemeines

HTML 5 Snippets

Grundgerüst

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta content='IE=8' http-equiv='X-UA-Compatible'>
  <title></title>
  <meta name="viewport" content="width=device-width">
  <!-- favicon.ico und apple-touch-icon.png in der root -->
  <link rel="stylesheet" href="css/stylesheet.css">
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]--> 
</head>
<body>
                
</body>
</html>

Position des Nutzers bestimmen mit HTML5 und Google Gears als Fallback

siehe auch Google Maps

mehr und bessere Beispiele unter HTML5 - Geolocation

// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();

function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
  
  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");
      initialLocation = newyork;
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
      initialLocation = siberia;
    }
    map.setCenter(initialLocation);
  }
}


HTML5 Vektorgrafik

http://raphaeljs.com/