N'a pas voir quoi que ce soit dans la documentation que je pensais que je serais donc demander ici:cartes Google statiques obtenir la vue par satellite avec inclinaison
Pour capturer l'image via api cartes statiques Google, est-il possible d'obtenir des vues qui ont inclinaison ? Ne semble pas être une documentation sur la façon d'interroger pour cela.
Merci.
J'ai fait un petit exemple qui pourrait vous aider. Il utilise html2canvas.js et jquery.js Je bifurqué aussi ce que @mfirdaus did in another answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Capture map</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
float: left;
height: 640px;
width: 640px;
}
.myButton1 {
-moz-box-shadow: 0px 1px 0px 0px #fff6af;
-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
box-shadow: 0px 1px 0px 0px #fff6af;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background: -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background: -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background: -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background: -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23', GradientType=0);
background-color: #ffec64;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #ffaa22;
display: inline-block;
cursor: pointer;
color: #333333;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffee66;
}
.myButton1:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
background: -moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background: -webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background: -o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background: -ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64', GradientType=0);
background-color: #ffab23;
}
.myButton1:active {
position: relative;
top: 1px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
</head>
<body>
<div id="map"></div>
<a id="btnSave" class="myButton1">generate img</a>
<a id="togCtrl" class="myButton1">toggle controls</a>
<div id="img-out"></div>
<script>
var map;
var transform;
var toggler = true;
function initialize() {
var tokio = new google.maps.LatLng(35.6801453, 139.728792);
var agbar = new google.maps.LatLng(41.4035482, 2.1894355);
map = new google.maps.Map(document.getElementById('map'), {
center: agbar,
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
//forked of https://stackoverflow.com/a/24281734/4537906
//get transform value
$("#btnSave").click(function() {
console.log('btnSave');
var transform = $(".gm-style>div:first>div").css("transform");
var comp = transform.split(","); //split up the transform matrix
var mapleft = parseFloat(comp[4]); //get left value
var maptop = parseFloat(comp[5]); //get top value
$(".gm-style>div:first>div").css({ //get the map container.
"transform": "none",
"left": mapleft,
"top": maptop,
})
html2canvas($('#map'), {
useCORS: true,
onrendered: function(canvas) {
var dataUrl = canvas.toDataURL('image/png'); //ready to use with the below commented line
//location.href = dataUrl; //this opens the image as an url into your browser
$(".gm-style>div:first>div").css({
left: 0,
top: 0,
"transform": transform
})
$("#img-out").append(canvas);
}
});
});
$("#togCtrl").click(function() {
map.setOptions({
disableDefaultUI: toggler,
disableDoubleClickZoom: toggler,
draggable: !toggler,
scrollwheel: !toggler
});
toggler = !toggler;
})
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize">
</script>
</body>
</html>Merci pour votre réponse. J'espérais avoir manqué quelque chose dans les docs google maps pour une façon simple de le faire. Mais ceci est une solution de contournement fonctionnelle. – Murcielago
2 questions de suivi: l'utilisation de Google image statique vue sur la rue api, peut vous interroger avec zoom de la rue vue spécifiée? J'ai oublié quelle était la deuxième question. – Murcielago
Pourquoi le downvote? – Murcielago
Je vous recommande de déposer une demande de fonctionnalité à l'adresse https://code.google.com/p/gmaps-api-issues/issues/list?can=2&q=apitype:Static%20type:Enhancement&sort=-stars&colspec=ID%20Type % 20Status% 20Summary% 20Internal% 20Stars – miguev