Information Technology Reference
In-Depth Information
<textarea style='float:left;margin-right:30px;'
placeholder='Your message here ...'
cols="50" rows="15" id="note"></textarea>
<div class='map' id='map'></div>
<div style='clear:both;' id='status'></div>
<button style='float:left;color:green;' id='save'
onclick='saveItem()'>Save</button>
<button onclick='drawAllItems()'>Draw all items on
map</button>
<button onclick='importDemoData()'>Import Demo Data
</button>
</div>
<div class='items' id='items'></div>
Wesentlich interessanter als die wenigen Zeilen HTML-Code ist der dazugehö-
rige JavaScript-Code. Zuerst werden eine Hilfsfunktion und drei globale Vari-
ablen definiert:
function $(id) { return document.getElementById(id); }
var map;
var my_pos;
var diaryItem = { id: 0, pos: 0, ts: 0, msg: '' }
Die Funktion
$
ist Ihnen bereits aus Abschnitt 7.2, Ein erster Versuch: Posi-
tionsausgabe im Browser, bekannt. Sie erspart Ihnen auch hier Tipparbeit und
trägt zur Lesbarkeit des Codes bei. Die Variable
map
dient als Referenz auf den
HTML-Bereich, in dem die Google-Maps-Darstellung Platz finden wird.
my_pos
wird zur Berechnung der Entfernung benötigt und enthält die aktuelle Position,
von der aus das Script aufgerufen wird.
diaryItem
stellt die Struktur dar, nach
der die einzelnen Einträge aufgebaut sind. Jeder Tagebucheintrag enthält eine
ID (
id)
, Informationen zur Position (
pos
), einen Zeitstempel (
ts
) sowie die ein-
gegebene Nachricht aus dem Textfeld (
msg
).
Sobald die Seite vollständig geladen ist, beginnen die Bestimmung der aktuel-
len Position und die Anzeige bestehender Einträge:
window.onload = function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(pos) {
my_pos = pos;
showItems();
},
posError,
