[JavaScript] GoogleStaticMap GPS-Punkte mit Canvas Zeichnen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Nanobyte, 20. März 2011 .

  1. 20. März 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    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:
    1. 52.541076,13.412075
    2. 52.539197,13.424177
    3. 52.536273,13.432932
    4. 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.
    Bild
     
  2. 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...
     
  3. 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 :/
    Spoiler
    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>
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.