Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 22): Positionsbestimmungen (2)

Web-Apps erstellen (Teil 22): Positionsbestimmungen (2)

Wie die Geolocation API prinzipiell funktioniert, habt ihr gesehen. Nun gilt es natürlich, daraus Kapital zu schlagen, also das Ganze in der App tatsächlich praktisch nutzbar zu machen. In diesem Video-Training wird die App also dahingehend ausgebaut, dass tatsächlich dynamisch die aktuelle Benutzerposition in einer Karte angezeigt wird. Außerdem erfahrt ihr, wie ihr die Darstellung der Karten mittels Markern selbst beeinflussen könnt.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Die Grundlagen zum Anzeigen der aktuellen Position wurden im vorherigen Tutorial beschrieben. Jetzt geht es darum, eine solche Anwendung tatsächlich App-tauglich zu machen.

Bilder



Nachfolgend findet ihr eine entsprechende Syntax.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5 Geolocation</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

</head>
<body>
<div data-role="page" id="workshops">
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" > <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Dieser Text wird nicht angezeigt</a>
  <h1>Anfahrt</h1>
</div>
<div data-role="content">
<div id="status"> </div>
<div class="article"> </div>
<script>
$(function() {
function success(position) {                                                                                                     
   var s = $('#status');
   if(s.hasClass('success')) {
   return
}
s.text("Die Position konnte ermittelt werden!");
   s.addClass('success');
   var map = $('<div id="map"></div>');
   map.css({
   width : '100%',
   height : '300px'
})
$('div.article').append(map);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map.get(0), myOptions);
}
function error(msg) {
$('#status').text = typeof msg == 'string' ? msg : "error";                                                                                           
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
   } else {
('#status').text = "Die Geolocation-API ist nicht verfügbar."
}
});
</script>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="about.html" data-icon="info">Über uns</a></li>
<li><a href="kontakt.html" data-icon="grid">Kontakt</a></li>
<li><a href="anfahrt.html" data-icon="star">Anfahrt</a></li>
<li><a href="impressum.html" data-icon="gear">Impressum</a></li>
<li><a href="#infos" data-icon="gear">Themen</a></li>
</li>
</div>
</div>
</div>
<div id="infos" data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Mehr zum Thema</h1>
  </div>
  <div data-tole="content">
    <p>Hier folgen die Detailinformationen</p>
  </div>
</div>
</body>
</html>

Die Bestandteile dieser Syntax dürften größtenteils bereits bekannt sein. So wird auch hier lediglich die aktuelle Position ermittelt. Zusätzlich ist die Syntax allerdings so konzipiert, dass mögliche Fehler abgefangen werden. Entscheidend ist hier vor allem getCurrentPosition(success, error). Dabei wird success aufgerufen, wenn die Positionsbestimmung tatsächlich erfolgreich war. Bei error handelt es sich hingegen um eine Callback-Funktion, die beim Scheitern der Positionsbestimmung aufgerufen wird.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
$('#status').text = "Die Geolocation-API ist nicht verfügbar."
}
});

Die Anwendung ist insgesamt so konzipiert, dass die Fehlermeldung "Die Geolocation-API ist nicht verfügbar" als statischer Text im Element mit der ID status angezeigt wird. Ihr könntet anstelle dieses Textes aber natürlich auch ein Bild oder Ähnliches anzeigen. Das bleibt im Endeffekt euch überlassen. Das grundlegende Prinzip ist dann aber tatsächlich identisch.


 

Die Darstellung der Karten anpassen

Momentan werden die Positionen jeweils zentriert angezeigt.

Bilder



 
Das ist so sicherlich in Ordnung, es geht aber noch ein bisschen besser. An dieser Stelle kommen die sogenannten Marker ins Spiel.

Bilder



Vorteil dieser Marker ist natürlich, dass man damit für jeden sichtbar bestimmte Positionen innerhalb der Karte sichtbar machen kann. Hier mal ein Beispiel dafür, wie eine typische Marker-Anwendung aussieht:
var ihrStandort = new google.maps.Marker({
            position: new google.maps.LatLng(lati, longi),
            map: karte,
            title: 'Ihr aktueller Standort'
  });

Durch die gezeigte Syntax wird die aktuelle Position mittels Marker in der Karte markiert. Das ist allerdings längst nicht die einzige Möglichkeit, für die man Marker nutzen kann. So lassen sich über Marker eben auch andere Punkte kennzeichnen. Damit das funktioniert, muss man die entsprechenden Längen- und Breitengrade kennen. Diese hat man üblicherweise nicht direkt parat, aber auch hier schafft Google Maps Abhilfe. Ruft dazu innerhalb von Google Maps die Adresse auf, die mit einem Marker gekennzeichnet werden soll. Sobald die Adresse geladen wurde, trägt man in die Adresszeile des Browsers Folgendes ein und drückt die Return-Taste:
javascript:void(prompt('',gApplication.getMap().getCenter()));

In einem Meldungsfenster sind dann die entsprechenden Koordinaten zu sehen.

Bilder



Als Ergebnis bekommt man zwei Zahlenwerte.

(52.52998, 13.36409)

Weitere Informationen sind tatsächlich nicht nötig, um die gewünschte Position innerhalb der Karte zu kennzeichnen. Auf diese Weise könnt ihr also auf jede gewünschte Position innerhalb der Karte einen Marker setzen.
var unserStandort = new google.maps.Marker({
      position: new google.maps.LatLng(52.52998, 13.36409),
      map: karte,
      title: 'Unser Standort'
  });

Interessant kann das beispielsweise sein, wenn ihr eine Anfahrtsbeschreibung anbieten wollt. Mit den Markern stehen euch dafür jedenfalls alle Optionen zur Verfügung.

Abschließend noch einmal die vollständige Syntax, durch welche die aktuelle Position mittels Marker innerhalb einer dynamisch geladenen Karte markiert wird.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5 Geolocation</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="workshops">
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" > <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Dieser Text wird nicht angezeigt</a>
  <h1>Anfahrt</h1>
</div>
<div data-role="content">
<div id="status"> </div>
<div class="article"> </div>
<script>
      $(function() {
          function success(position) {                                                                                                     
            var s = $('#status');


 

                    if(s.hasClass('success')) {                      return                      }                                                                                                                                   s.text("Die Position konnte ermittelt werden!");                     s.addClass('success');                      var map = $('<div id="map"></div>');                     map.css({                                    width : '100%',                                     height : '300px'                                 })                      $('div.article').append(map);                      var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);                      var myOptions = {                      zoom: 16,                      center: latlng,                      mapTypeControl: false,                     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},                     mapTypeId: google.maps.MapTypeId.ROADMAP                     };                      var map = new google.maps.Map(map.get(0), myOptions);                                                                               var ihrStandort = new google.maps.Marker({             position:  latlng,             map: map,             title: 'Ihr aktueller Standort'   }); }        function error(msg) {        $('#status').text = typeof msg == 'string' ? msg : "error";                                                                                                                  }                                                                                                      if (navigator.geolocation) {       navigator.geolocation.getCurrentPosition(success, error);        } else {        $('#status').text = "Die Geolocation-API ist nicht verfügbar."       }       }); </script> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="about.html" data-icon="info">Über uns</a></li> <li><a href="kontakt.html" data-icon="grid">Kontakt</a></li> <li><a href="anfahrt.html" data-icon="star">Anfahrt</a></li> <li><a href="impressum.html" data-icon="gear">Impressum</a></li> <li><a href="#infos" data-icon="gear">Themen</a></li> </li> </div> </div> </div> <div id="infos" data-role="page">   <div data-role="header" data-position="fixed">     <h1>Mehr zum Thema</h1>   </div>   <div data-tole="content">     <p>Hier folgen die Detailinformationen</p>   </div> </div> </body> </html>


Diese Anwendung könnt ihr als Ausgangspunkt für eure eigenen Anwendungen verwenden. So wäre es dann beispielsweise möglich, eine dynamische Anfahrtbeschreibung in die App zu integrieren. Das notwendige Rüstzeug dazu habt ihr jetzt jedenfalls.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Balu..der..Bär
Portrait von MicroSmurf
  • 17.09.2014 - 00:27

Wieder sehr interessant. Vielen Dank.

Portrait von Steve007
  • 11.08.2014 - 19:13

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Kundentest
  • 09.08.2014 - 20:26

Herzlichen Dank für das Tutorial.

Portrait von johen
  • 09.08.2014 - 19:20

Sehr interessant,wie immer.Vielen Dank!

Portrait von Caesarion2004
  • 09.08.2014 - 16:23

Vielen Dank für den weiteren, sehr guten Teil dieser interessanten und hilfreichen Reihe!

Portrait von BOPsWelt
  • 09.08.2014 - 16:11

Vielen Dank für einen weiteren Teil der Reihe.

Portrait von arko2013
  • 13.07.2014 - 11:02

Danke für das sehr interessante und verständliche tutorial.

Portrait von Rapir
  • 13.07.2014 - 10:56

Vielen Dank fürs Tutorial. Marker setzen kurz und treffend erklärt.

Portrait von renate_C
  • 13.07.2014 - 10:50

Vielen Dank für deine Mühe sowie das interessante Tutorial und die Datei.

Portrait von Caesarion2004
  • 13.07.2014 - 10:48

Vielen Dank für das interessante und informative Tutorial.

Portrait von Kundentest
  • 13.07.2014 - 10:25

Herzlichen Dank für das weitere sehr interessante Video.

Portrait von Steve007
  • 13.07.2014 - 10:25

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von johen
  • 13.07.2014 - 08:21

Vielen Dank für ein weiteres informatives Tutorial.

Portrait von MicroSmurf
  • 13.07.2014 - 08:10

Interessant wie immer. Danke.

x
×
×