web-dev-qa-db-fra.com

Enregistrer la carte Google actuelle en tant qu'image

Comment puis-je enregistrer la carte Google actuelle sous forme d'image? Ci-dessous se trouve le Javascript que j'utilise pour initialiser la carte.

var myMarker = new google.maps.LatLng(result[0].centerLat, result[0].centerLong);
var myOptions = {
  disableDoubleClickZoom: true,
  zoom: result[0].zoom,
  center: myMarker,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

J'ai jeté un œil à https://developers.google.com/maps/documentation/javascript/reference#Map mais il ne semble pas y avoir de méthode qui renvoie une URL ou une image pour l'objet de carte actuel. Est-il possible d'enregistrer la carte en tant qu'image d'une manière ou d'une autre?

javascriptasp.netgoogle-maps-api-3
34
Ewald Stieger

Vous pouvez utiliser l'API statique de google maps: https://developers.google.com/maps/documentation/staticmaps/

Vous pouvez obtenir les paramètres dont vous avez besoin pour passer à l'api des cartes statiques (par exemple, centre, région visible, etc.) à partir de l'api javascript de google maps.

19
basarat

Si vous souhaitez enregistrer plus que l'API statique de Google Maps ne le permet (comme les superpositions personnalisées dessinées dessus trop complexes/grandes pour passer à travers la chaîne de requête), vous pouvez exporter le conteneur de carte vers un canevas en utilisant quelque chose comme html2Canvas ( http : //html2canvas.hertzen.com/ ), puis convertissez-le en URL de données et faites-en ce que vous voulez.

function saveMapToDataUrl() {

    var element = $("#mapDiv");

    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var dataUrl= canvas.toDataURL("image/png");

            // DO SOMETHING WITH THE DATAURL
            // Eg. write it to the page
            document.write('<img src="' + dataUrl + '"/>');
        }
    });
}

Je crois que vous devez définir l'option useCORS sur true afin de permettre à la fonction de télécharger des images de Google.

L'inconvénient de cette approche est qu'elle pourrait vous laisser environ un mégaoctet de données sur votre page.

J'ai essayé d'utiliser cette approche pour EXPORTER une carte vers une image à télécharger, mais j'ai rencontré des problèmes pour obtenir cette image pour la personne dans un manoir de Nice. Vous pouvez utiliser un lien hypertexte dont l'attribut href est défini sur dataUrl que vous avez créé, mais le nom de fichier ne peut pas être défini à moins que vous n'utilisiez des attributs HTML tels que download = "filename.png", ce qui m'a posé problème sur différents navigateurs. Une autre approche consiste à publier le dataUrl sur le serveur pour que le serveur le distribue comme il le doit, mais télécharger une grande image uniquement pour la télécharger à nouveau semble une étrange façon de gérer cela.

32
Arkiliknam

Utilisez l'API:

var currentPosition=map.getCenter();
return "http://maps.google.com/maps/api/staticmap?sensor=false&center=" +
  currentPosition.lat() + "," + currentPosition.lng() +
  "&zoom="+map.getZoom()+"&size=512x512&markers=color:green|label:X|" +
  currentPosition.lat() + ',' + currentPosition.lng();
4
dda
function Export() 
{          

 var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap"; 

        //Set the Google Map Center.        
        staticMapUrl += "?center=" + mapOptions.center.G + "," +     mapOptions.center.K;

        //Set the Google Map Size.
        staticMapUrl += "&size=500x400"; 
        //Set the Google Map Zoom.
        //staticMapUrl += "&zoom=" + mapOptions.zoom;
         staticMapUrl += "&zoom= 19";
          staticMapUrl += "&style=visibility:on";         

          for(var n in polygons)
          {        
           staticMapUrl += "&path=color:0x0x23537C%7Cfillcolor:0x0x23537C|weight:0|"+polygons[n];
          }         

        //Set the Google Map Type.
        staticMapUrl += "&maptype=" + mapOptions.mapTypeId;
        staticMapUrl += "&markers=icon:"+iconpath+"%7c"+latitude+","+longitude;
        staticMapUrl += "&scale= 1";

        for (var j in markers) { 
           if (markers[j]!=='')
           {          
            var image=imagnameewithpath+".png";     
            staticMapUrl += "&markers=icon:"+image+"%7c"+markers[j]+"|";

           }           

      var canvas=document.createElement('canvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.crossOrigin = "crossOrigin";  // This enables CORS  
      imageObj.onload = function() {
       canvas.width=imageObj.width;
       canvas.height=imageObj.height;
        context.drawImage(imageObj, 0, 0,imageObj.width,imageObj.height);
        var dataurl=canvas.toDataURL('image/png');
         var imgMap = document.getElementById("imgMap");
        imgMap.src = dataurl;        
      };
      imageObj.src = staticMapUrl;

    }
2
Tarun

Vous pouvez utiliser deux méthodes: en utilisant html2canvas pour générer une image ou une API de cartes statiques Google.

API Google Maps statiques

function mapeado(geocoder, map, infowindow) {
    var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap";

    //Set the Google Map Center.
    staticMapUrl += "?center=" + document.getElementById('lat').value + "," + document.getElementById('lng').value;

    //Set the Google Map Size.
    staticMapUrl += "&size=640x480&scale=2";

    //Set the Google Map Type.
    staticMapUrl += "&maptype=hybrid";

    //Set the Google Map Zoom.
    staticMapUrl += "&zoom=" + mapOptions.zoom;

    //Loop and add Markers.
    staticMapUrl += "&markers=" + document.getElementById('lat').value + "," + document.getElementById('lng').value;

    //Display the Image of Google Map.
    var imgMap = document.getElementById("imgMap");

    $("#imgMap").attr("src", staticMapUrl);
    return imgMap + "png";
}

html2canvas

function convertasbinaryimage() {
    html2canvas(document.getElementById("map"), {
        useCORS: true,
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png");
            img = img.replace('data:image/png;base64,', '');
            var finalImageSrc = 'data:image/png;base64,' + img;
            $('#googlemapbinary').attr('src', finalImageSrc);
         }
    });
}
1
Oscar Vicente Burgoa Yujra

Voici l'url directe

Pour les annotations

https://maps.googleapis.com/maps/api/staticmap?center=23.03,72.58&zoom=6&size=640x400&path=weight:3|color:blue|enc:aofcFz_bhVJ[n@ZpAp@t@b@uA%60FuAzEoCdJiDpLs@VM@y@s@oBcBkAw@cCoAuBu@eEaAiAa@iAi@w@a@o@g@g@k@e@u@uAaCc@i@w@y@eAo@i@UaBc@kAGo@@]JyKA}EC{G?q@?IGKCeGA{CAyCAyEAwEBaFAkJ?yGEyAIiLAiB?{@BcBJ}@@aBGwBEo@A@j@BjBFTHjEl@fOD%60C?|@RARAJERWPL@FE^S%60AI%60A&key=API_KEY

Pour satellite

https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=37.530101,38.600062&zoom=14&size=640x400&key=YOUR_API_KEY

Pour une carte stylisée

http://maps.googleapis.com/maps/api/staticmap?center=Australia&size=640x400&style=element:labels|visibility:off&style=element:geometry.stroke|visibility:off&style=feature:landscape|element:geometry|saturation:-100&style=feature:water|saturation:-100|invert_lightness:true&key=YOUR_API_KEY

Vous pouvez directement l'utiliser en modifiant les paramètres nécessaires, vous avez juste besoin de API_KEY

1
Mihir Bhatt

Vous pouvez trouver utile les API de cartes statiques, qui génèrent directement des images.

https://developers.google.com/maps/documentation/staticmaps/

comme celui-ci - c'est l'image: 

et il existe des outils comme: http://gmaps-utility-library-dev.googlecode.com/svn/tags/snapshotcontrol/1.0/examples/optionsWizard.html

ref: image Google Maps?

1
Aristos