Google静态地图可以获得倾斜的卫星视图 [英] Google static maps get satellite view with tilt
本文介绍了Google静态地图可以获得倾斜的卫星视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在文档中没有看到任何内容，所以我想我会问这里：
对于通过google静态地图api捕获图像，有什么方法可以获取视图有倾斜？似乎没有任何关于如何查询的文档。
谢谢。
解决方案
我做了一个可以帮助你的小例子。
它使用html2canvas.js和jquery.js
我也分叉了@mfirdaus 在另一个答案中做了些什么
<！DOCTYPE html>< html>< head> < meta charset =utf-8> < title>捕捉地图< /标题> <风格> html，body {height：100％;保证金：0;填充：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;背景：-webkit-gradient（线性，左上，左下，颜色停止（0.05，＃ffec64），color-stop（1，＃ffab23））;背景：-moz-linear-gradient（顶部，＃ffec64 5％，＃ffab23 100％）;背景：-webkit-linear-gradient（顶部，＃ffec64 5％，＃ffab23 100％）;背景：-o-linear-gradient（顶部，＃ffec64 5％，＃ffab23 100％）;背景：-ms-linear-gradient（顶部，＃ffec64 5％，＃ffab23 100％）;背景：线性渐变（至底部，＃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;显示：inline-block;光标：指针;颜色：＃333333; font-family：Arial; font-size：15px; font-weight：bold; padding：6px 24px;文字修饰：无; text-shadow：0px 1px 0px＃ffee66; } .myButton1：hover {background：-webkit-gradient（线性，左上方，左下方，color-stop（0.05，＃ffab23），color-stop（1，＃ffec64））;背景：-moz-linear-gradient（顶部，＃ffab23 5％，＃ffec64 100％）;背景：-webkit-linear-gradient（顶部，＃ffab23 5％，＃ffec64 100％）;背景：-o-linear-gradient（顶部，＃ffab23 5％，＃ffec64 100％）;背景：-ms-linear-gradient（顶部，＃ffab23 5％，＃ffec64 100％）;背景：线性渐变（至底部，＃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 / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js>< / script> < script src =https://code.jquery.com/jquery-3.0.0.min.jsintegrity =sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0 =crossorigin =anonymous>< / script>< / head> ;<身体GT; < div id =map>< / div> < a id =btnSaveclass =myButton1>生成img< / a> < a id =togCtrlclass =myButton1>切换控制< / a> < div id =img-out>< / div> <脚本> var map; var变换; var toggler = true;函数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}）; } //分叉https://stackoverflow.com/a/24281734/4537906 //获取变换值$（＃btnSave）。click（function（）{console.log（'btnSave'）; var transform = $ （.gm-style> div：first> div）。css（transform）; var comp = transform.split（，）; //分割变换矩阵var mapleft = parseFloat（comp [4] ）; //获得左值var maptop = parseFloat（comp [5]）; //获取最高值$（.gm-style> div：first> div）.css（{//获取地图容器。 （'＃map'），{useCORS：true，onrendered：function（canvas）{var dataUrl = canvas.toDataURL（） '/ image / png'）; //准备好使用下面的注释行//location.href = dataUrl; //这会将图像作为url打开到浏览器中$（.gm-style> div：first> div ）.css（{left：0，top：0，transform：transform}）$（＃i毫克出）附加（画布）。 }}）; }）; $（＃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>
Didn't see anything in documentation so I figured I'd ask here:
For capturing image via google static maps api, is there any way to get views that have tilt? Doesn't seem to be any documentation on how to query for this.
Thanks.
解决方案
I've done a small example that could help you. It uses html2canvas.js and jquery.js I forked also what @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>
这篇关于Google静态地图可以获得倾斜的卫星视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
