[JavaScript] GoogleStaticMap GPS-Punkte mit Canvas Zeichnen

Nanobyte · 20. März 2011

GoogleStaticMap GPS-Punkte mit Canvas Zeichnen

Hallo,

Vorwort!
Es geht hier nicht darum die Google Maps API zu nutzen um Punkte auf eine Statische Map von Google zu zeichnen.
(Ich weiß das dass möglich ist, aber eben nicht offline)

Was ist los?
Ich habe von Google eine Statische Karte als jpeg, bekannte Daten davon sind:

(Beispiel-Daten die sich jederzeit ändern können)
Punkt in der Mitte: 52.523794, 13.411818
Breite: 550px
Höhe: 300px
Zoomstufe: 13

Der Ausschnitt der Karte wird über die StaticMap API von Google geholt und ist Local im Browser gespeichert und somit Offline verfügbar.

Der Abschnitt wird in ein Canvas-Element geladen um darauf GPS Punkte als Pfade einzeichnen zu können.

Das Problem:

Die GPS Punkte für dieses Beispiel sind:

52.541076,13.412075
52.539197,13.424177
52.536273,13.432932
52.532148,13.441429

Wie lässt sich mit den bekannten Daten (ganz oben) die Pixel-Position für jede der 4 GPS-Positionen ermitteln?

mfg Nanobyte

Die Grünen Pfeile sind die 4 GPS-Positionen die Google auf der Javascript-Map eingezeichnet hat.

Anzeige

Timer · 20. März 2011

AW: GoogleStaticMap GPS-Punkte mit Canvas Zeichnen

hier: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/overlays.html#CustomMapTypes

dort solltest du alle nötigen infos finden, wie du die mit hilfe der zoomstufe die koordinaten der ecken der karte erechnen kannst. (prinzipiell brauchst du nur 2: nord-west und süd-ost)

auf basis derer kannst du dann die punkte ausrechnen...

Nanobyte · 21. März 2011

AW: GoogleStaticMap GPS-Punkte mit Canvas Zeichnen

Danke "Timer" die Seite habe ich die letzten Tage vorwärts und rückwärts gelesen :/

Hier mein Aktueller Status.
Die 3 Punkte wandern beim verschieben in der Javascript-Map hin und her :/

HTML:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8" />

 <title>Karte Local Speichern</title>

 <style type="text/css">
 #online-map {
 position: relative;
 margin: 50px auto 0;
 width: 550px;
 height: 300px;
 border: 2px inset #999;
 }

 #mapdata {
 text-align: center;
 }

 #localmap {
 display: block;
 position: absolute;
 top: 50px;
 left: 50px;
 border: 5px solid #000;
 border-color: rgba(0,0,0,0.5);
 background-color: #000;
 z-index: 900;
 }
 </style>



 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
 
 
 if( typeof window.console == 'undefined' )
 {
 window.console = {log:function(){},warn:function(){},debug:function(){}};
 }
 
 var googleMAP = null;
 var mapSize = [400,300];
 var savedCoords = {'lat':53.14345, 'lng': 8.214426, 'zoom': 14};
 var canvasContext = null;

 function mapInitialize() {

 var latlng = new google.maps.LatLng( savedCoords.lat, savedCoords.lng);
 var myOptions = {
 zoom: savedCoords.zoom,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.HYBRID
 };
 
 
 $('#online-map').css({'width':mapSize[0],'height':mapSize[1]});

 googleMAP = new google.maps.Map(document.getElementById("online-map"), myOptions);
 }


 $(function()
 {
 mapInitialize();
 $('#save').click( mapSave );
 setInterval( updateMapData, 250 );
 }
 );


 function mapSave()
 {
 var position = googleMAP.getCenter();
 var zoom = googleMAP.getZoom();

 savedCoords.lat = position.lat();
 savedCoords.lng = position.lng();
 savedCoords.zoom = zoom;

 var saveMapSrc = 'http://maps.google.com/maps/api/staticmap?center=' + position.lat() + ',' + position.lng() + '&zoom=' + zoom + '&size='+mapSize.join('x')+'&format=jpeg&maptype=hybrid&mobile=true&language=de&sensor=true';


 var mapImg = new Image(mapSize[0], mapSize[1]);
 mapImg.onload = function()
 {
 if( $('#localmap').length == 0 )
 {
 var canvas = $('<canvas/>').attr('id', 'localmap');
 canvas.attr('width', mapSize[0]);
 canvas.attr('height', mapSize[1]);
 canvas.click( function(){$(this).hide();} );
 canvasContext = canvas.get(0).getContext("2d");
 canvas.appendTo('body');
 }
 
 

 $('#localmap').show();
 canvasContext.fillStyle = '#fff'; // white
 canvasContext.fillRect(0, 0, mapSize[0], mapSize[1]);
 canvasContext.drawImage( mapImg, 0, 0 );

 drawPoint(53.140464, 8.218117);
 drawPoint(53.137812, 8.218203);
 drawPoint(53.136564, 8.217001);
 };
 mapImg.src = saveMapSrc;

 }


 function drawPoint(lat, lng)
 {
 var left = savedCoords.lng * Math.pow( 2, savedCoords.zoom ) - (mapSize[0]/2);
 var top = savedCoords.lat * Math.pow( 2, savedCoords.zoom ) - (mapSize[1]/2);
 
 var pLeft = lng * Math.pow( 2, savedCoords.zoom );
 var pTop = lat * Math.pow( 2, savedCoords.zoom );
 
 console.log( 'LEFT: ' + left );
 console.log( 'TOP: ' + top );
 
 console.log( 'pLeft: ' + pLeft );
 console.log( 'pTop: ' + pTop );
 
 console.log( 'X: ' + (pLeft - left) );
 console.log( 'Y: ' + (pTop - top) );
 
 
 
 var x = pLeft - left;
 var y = pTop - top;
 
 // Roten Kreis Zeichnen
 canvasContext.lineWidth = 3;
 canvasContext.strokeStyle = 'rgba(255,0,0,1)';
 canvasContext.beginPath();
 canvasContext.arc(x, y, 5, 0, Math.PI*2, false);
 canvasContext.stroke();
 canvasContext.closePath();
 }


 function updateMapData()
 {
 if( googleMAP == null )
 return;

 var position = googleMAP.getCenter();
 var zoom = googleMAP.getZoom();

 $('#mapdata').text( 'Zoom: ' + zoom + ' - Lat: ' + position.lat() + ' - Lng: ' + position.lng() );
 }
 </script>

 </head>

 <body>


 <div id="mapdata">Loading ...</div>
 <div style="text-align:center">
 <button type="button" id="save">Speichern</button>
 </div>
 <div id="online-map"></div>



 </body>

</html>

Nützliche Suchen

[JavaScript] GoogleStaticMap GPS-Punkte mit Canvas Zeichnen

Videos zum Themenbereich