Bei der Dateneingabe über Handy werden GPS-Koordinaten übergeben.
Bitte informieren Sie sich über lizenzrechtliche Belange beim Hersteller der jeweiligen Anwendung, die Ihnen die Koordinaten anzeigt, z.B. Google
1. Um GOOGLE-Maps nutzen zu können, muss ein GOOGLE-Konto erstellt werden.
Informationen hierzu finden Sie in einem Tutorial unter folgendem Link (https://developers.google.com/maps/documentation/javascript/tutorial#api_key).
Im Ergebnis erhalten Sie einen sog. Google-Maps Browser-Key, der für die weitere Einrichtung in der GDI Zeit benötigt wird (siehe Punkt 2).
2. Die Zeiterfassungsoptionen aufrufen und den Bereich GPS wählen. Hier ist folgendes Script zu hinterlegen/hinein zu kopieren und dabei das grün markierte Schlüsselwort your_api_key durch den unter Punkt 1 erhaltenen Browser-Key zu ersetzen. Dieses Skript wird benötigt, um den Standort einer Buchung anzuzeigen, sowie die Geofence-Daten darzustellen. Ein Aufruf ist über die Jahreswerte oder über das Webterminal möglich.
Hinweis: Die Anzeige über das Webterminal erfolgt über eine SSL Verbindung. Ist kein SSL-Zertifikat vorhanden ist es vom eingesetzten Browser abhängig ob die Daten angezeigt werden.
Hier das Beispiel für Google-Maps:
<!DOCTYPE html> <html> <head> <title>#title#</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=FALSE"> </script> <script> /* Vordefinierte GDI-Variablen: #title # #lat # #lng # #arraybuchungen # */ //var myLatlng = new google.maps.LatLng(49.194134, 8.129151); //#latlng#); // var map; var maxSumRangeBuchungen = 10; var maxSumRangeKostenstellen = 10; var myLatlng; function initialize() { var #arraybuchungen# // ArrayBuchungen = [ // 0 1 2 3 4 5 6 7 8 9 10 11 // [49.194001, 8.129101, 'Mitarbeiter1', 'Datum', 'von', 'bis', 'Dauer', 'Zeitart', 'Kst','Ktr', 'GUID', 'K'], // [49.198001, 8.125901, 'Mitarbeiter2', 'Datum', 'von', 'bis', 'Dauer', 'Zeitart', 'Kst','Ktr', 'GUID', 'G'] // ]
var #arraykostenstellen# // ArrayKostenstellen = [ // 0 1 2 3 // [49.194001, 8.129101, Radius, KostenstellenName1 ], // [49.194001, 8.129101, Radius, KostenstellenName2 ], // ]
myLatlng = calcMeanValues(); var mapOptions = { zoom: calcZoom(), //zoom: 15, center: myLatlng }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
sumSimilarKGEntry(); markEntriesRed(); generateBuchungMarker();
removeDuplicateKST(); generateKostenstellenMarker();
function OnClickEvent() { if (!this.infowindow) { // um bestehende infowindows wiederzuverwenden this.infowindow = new google.maps.InfoWindow({ content: this.Content //size : new google.maps.Size(500,150) }); }; this.infowindow.open(map, this); }
function calcZoom() { var MaxLat = -500.0; var MaxLng = -500.0;
var MinLat = 500.0; var MinLng = 500.0;
var SumEntries = ArrayBuchungen.length + ArrayKostenstellen.length;
if(SumEntries === 0) { return 15; }
for (var i = 0; i < ArrayBuchungen.length; i++) { if(parseFloat(ArrayBuchungen[i][0]) > MaxLat) MaxLat = parseFloat(ArrayBuchungen[i][0]); if(parseFloat(ArrayBuchungen[i][1]) > MaxLng) MaxLng = parseFloat(ArrayBuchungen[i][1]); if(parseFloat(ArrayBuchungen[i][0]) < MinLat) MinLat = parseFloat(ArrayBuchungen[i][0]); if(parseFloat(ArrayBuchungen[i][1]) < MinLng) MinLng = parseFloat(ArrayBuchungen[i][1]); }
for (var i = 0; i < ArrayKostenstellen.length; i++) { if(parseFloat(ArrayKostenstellen[i][0]) > MaxLat) MaxLat = parseFloat(ArrayKostenstellen[i][0]); if(parseFloat(ArrayKostenstellen[i][1]) > MaxLng) MaxLng = parseFloat(ArrayKostenstellen[i][1]); if(parseFloat(ArrayKostenstellen[i][0]) < MinLat) MinLat = parseFloat(ArrayKostenstellen[i][0]); if(parseFloat(ArrayKostenstellen[i][1]) < MinLng) MinLng = parseFloat(ArrayKostenstellen[i][1]); }
var dx = 71.5 * (MaxLng - MinLng); var dy = 111.3 * (MaxLat - MinLat); var distance = ((Math.sqrt(dx * dx + dy * dy))*1000);
var zoom = 0; var z = 1; var start = parseFloat(1500);
//window.alert(distance);
while(zoom === 0) { //window.alert(start); z = z + 1; start = parseFloat(start) * 1.9; if(parseFloat(distance) <= parseFloat(start)) { zoom = 17-z; } } //window.alert(zoom);
if(zoom > 15) return 15; if(zoom < 1) return 1;
//window.alert(zoom); return zoom; }
function calcMeanValues() { var SumLat = 0.0; var SumLng = 0.0; var SumEntries = ArrayBuchungen.length + ArrayKostenstellen.length;
if(SumEntries === 0) { return new google.maps.LatLng("49.198001" , "8.125901"); }
for (var i = 0; i < ArrayBuchungen.length; i++) { SumLat = SumLat + parseFloat(ArrayBuchungen[i][0]); SumLng = SumLng + parseFloat(ArrayBuchungen[i][1]); }
for (var i = 0; i < ArrayKostenstellen.length; i++) { SumLat = SumLat + parseFloat(ArrayKostenstellen[i][0]); SumLng = SumLng + parseFloat(ArrayKostenstellen[i][1]); } return new google.maps.LatLng((SumLat / SumEntries) , (SumLng / SumEntries)); }
function sumSimilarKGEntry() { for (var i = 0; i < ArrayBuchungen.length; i++) { for (var j = 0; j < ArrayBuchungen.length; j++) { if(j !== i) { //GUID identisch => Radius fehlt if(ArrayBuchungen[i][10] === ArrayBuchungen[j][10] && isInMaxGPSRange(ArrayBuchungen[i][0],ArrayBuchungen[i][1], ArrayBuchungen[j][0], ArrayBuchungen[j][1], maxSumRangeBuchungen)) { ArrayBuchungen[i][11] = 'KG'; ArrayBuchungen.splice(j, 1); sumSimilarKGEntry; return; } } } } }
function markEntriesRed() { for (var i = 0; i < ArrayBuchungen.length; i++) { if(ArrayBuchungen[i][11].includes('K')) { ArrayBuchungen[i][4] = '<font style="color:red;">' + ArrayBuchungen[i][4] + '</font>'; } if(ArrayBuchungen[i][11].includes('G')) { ArrayBuchungen[i][5] = '<font style="color:red;">' + ArrayBuchungen[i][5] + '</font>'; } } }
function accumulateEntries( positionenEntries, GPSLat, GPSLong ) { for (var i = 0; i < ArrayBuchungen.length; i++) { if(positionenEntries === '') { GPSLat = ArrayBuchungen[i][0]; GPSLong = ArrayBuchungen[i][1]; } if(isInMaxGPSRange(ArrayBuchungen[i][0], ArrayBuchungen[i][1], GPSLat, GPSLong, maxSumRangeBuchungen)) { positionenEntries = positionenEntries + ' <tr>' + ' <th>' + ArrayBuchungen[i][2] + '</th>' + ' <th>' + ArrayBuchungen[i][3] + '</th>' + ' <th>' + ArrayBuchungen[i][4] + '</th>' + ' <th>' + ArrayBuchungen[i][5] + '</th>' + ' <th>' + ArrayBuchungen[i][6] + '</th>' + ' <th>' + ArrayBuchungen[i][7] + '</th>' + ' <th>' + ArrayBuchungen[i][8] + '</th>' + ' <th>' + ArrayBuchungen[i][9] + '</th>' + ' </tr>'; ArrayBuchungen.splice(i, 1); return accumulateEntries(positionenEntries, GPSLat, GPSLong); } } return positionenEntries; }
function generateBuchungMarker() { if(ArrayBuchungen.length > 0) { marker = new google.maps.Marker({ position: new google.maps.LatLng(ArrayBuchungen[0][0], ArrayBuchungen[0][1]),map: map, title: ArrayBuchungen[0][1] }); var positionen = ''; positionen = accumulateEntries(positionen, '', ''); marker.Content = '<table border="1" cellpadding="3" cellspacing="0" >' + ' <tr>' + ' <th>Mitarbeiter</th>' + ' <th>Datum</th>' + ' <th>Von</th>' + ' <th>Bis</th>' + ' <th>Dauer</th>' + ' <th>Zeitart</th>' + ' <th>Kostenstelle</th>' + ' <th>Kostenträger</th>' + ' </tr>' + positionen + '</table>' + '<font size=2; color="#FF0000">* Roter Text entspricht der Kartenmarkierung</font>'; marker.setMap(map); google.maps.event.addListener(marker, 'click', OnClickEvent); generateBuchungMarker(); }//if } // function
function generateKostenstellenMarker() { if(ArrayKostenstellen.length > 0) { kstmarker = new google.maps.Marker({ position: new google.maps.LatLng(ArrayKostenstellen[0][0], ArrayKostenstellen[0][1]), map: map, zoom: 1, Color: '#FF9B00', title: ArrayKostenstellen[0][3], Label: '', context: 'kst-context', ColorType: '#0000FF', animation: google.maps.Animation.DROP, icon: 'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png' }); var zeilen = '';
zeilen = accumulateKSTEntries(zeilen, '', ''); kstmarker.Content = '<table border="1" cellpadding="3" cellspacing="0" >' + ' <tr>' + ' <th>Kostenstelle</th>' + ' <th>Radius</th>' + ' </tr>' + zeilen + '</table>'; kstmarker.setMap(map); google.maps.event.addListener(kstmarker, 'click', OnClickEvent); generateKostenstellenMarker(); } //endfor }//Function
function accumulateKSTEntries( kstEntries, GPSLat, GPSLong ) { for (var i = 0; i < ArrayKostenstellen.length; i++) { if(kstEntries === '') { GPSLat = ArrayKostenstellen[i][0]; GPSLong = ArrayKostenstellen[i][1]; } if(isInMaxGPSRange(ArrayKostenstellen[i][0], ArrayKostenstellen[i][1], GPSLat, GPSLong, maxSumRangeKostenstellen)) { cityCircle = new google.maps.Circle({ strokeColor: '#FFBB00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FFDD00', fillOpacity: 0.35, map: map, center: new google.maps.LatLng(ArrayKostenstellen[i][0], ArrayKostenstellen[i][1]), //%s für lat, long radius: ArrayKostenstellen[i][2] // Radius });
kstEntries = kstEntries + ' <tr>' + ' <th>' + ArrayKostenstellen[i][3] + '</th>' + ' <th>' + ArrayKostenstellen[i][2] + '</th>' + ' </tr>';
ArrayKostenstellen.splice(i, 1); return accumulateKSTEntries(kstEntries, GPSLat, GPSLong); } } return kstEntries; }
function removeDuplicateKST() { for (var i = 0; i < ArrayKostenstellen.length; i++) { for (var j = 0; j < ArrayKostenstellen.length; j++) { if(j !== i) { if((ArrayKostenstellen[i][0] === ArrayKostenstellen[j][0]) && (ArrayKostenstellen[i][1] === ArrayKostenstellen[j][1]) && (ArrayKostenstellen[i][2] === ArrayKostenstellen[j][2]) && (ArrayKostenstellen[i][3] === ArrayKostenstellen[j][3])) { ArrayKostenstellen.splice(j, 1); removeDuplicateKST(); return; } } } } }
function isInMaxGPSRange(GPSLat1, GPSLong1, GPSLat2, GPSLong2, MaxRadius) { var dx = 71.5 * (GPSLong1 - GPSLong2); var dy = 111.3 * (GPSLat1 - GPSLat2); if(((Math.sqrt(dx * dx + dy * dy))*1000) <= MaxRadius) return true; else return false; } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> |
Hier müssen Sie Ihren Browser Key der von Google erstellt wurde einfügen.
Hier können Sie den Radius von Buchungen oder Kostenstellen (Angabe in Meter) festlegen. Der Default-Wert ist 10.
Als Default-Wert ist eine Zoom Berechnung aktiv, um alle Punkte auf der Karte anzuzeigen. Alternativ kann diese auskommentiert werden, und ein Standard Wert für den Zoom aktiviert werden. Als gültiger Wert ist 1-19 zulässig.
Hier kann die Animation oder das Bild des Marker am Beispiel der Kostenstelle verändert werden.
|
3. Alles speichern fertig!