在google map javascript下拍摄特定区域的快照 [英] Take snapshot of a specific area under google map javascript
问题描述
我试图抓取由Google地图上绘制的矩形所包围的区域的快照。是否可以拍摄矩形下面的区域的快照？我搜索了答案，但找不到任何有用的信息。
我试图通过指定地图中心来使用静态地图API拍摄矩形区域的快照，缩放级别，图像宽度和图像高度。像 这是我试过的代码， 现在我使用这个网址下载图片， https://maps.googleapis.com/maps/api/staticmap？ center = + centre.lat（）+，+ centre.lng（）+& zoom =+ zoom +& size =+ width +x+ height +& amp ; maptype = satellite& key = API_KEY 我得到了图片，但图像不包含矩形所包围的整个区域（太小）。我做错了什么？有没有其他的方法可以做到这一点？
一样 https://maps.googleapis.com/maps/api/ $ p
$
var zoom = map.zoom;
var center = rectangle.getBounds（）。getCenter（）; //矩形是在地图上绘制的形状
var spherical = google.maps.geometry.spherical;
bounds = rectangle.getBounds（）; //矩形是在地图上绘制的形状
cor1 = bounds.getNorthEast（）;
cor2 = bounds.getSouthWest（）;
cor3 = new google.maps.LatLng（cor2.lat（），cor1.lng（））;
cor4 = new google.maps.LatLng（cor1.lat（），cor2.lng（））;
width = spherical.computeDistanceBetween（cor1，cor3）;
height = spherical.computeDistanceBetween（cor1，cor4）;
height 参数。目前，您以米为单位计算距离并将其传递到静态地图网址中，而不是像素。
我创建了一个基于示例代码的示例，并且能够创建正确的静态地图网址。请看看我的例子。 distanceInPx 函数是最重要的。用绘图管理器创建矩形，然后单击显示静态地图链接。此外，请注意，静态地图API在标准方案中的图片尺寸限制为640x640像素，因此您无法为尺寸较大的矩形创建链接。 data-hide =falsedata-console =truedata-babel =false>
函数initMap（）{var map = new google.maps.Map（document.getElementById（'map'），{center：{lat：28.45765，lng ：-16.363564}，zoom：21，mapTypeId：google.maps.MapTypeId.SATELLITE}）; var drawingManager = new google.maps.drawing.DrawingManager（{drawingMode：google.maps.drawing.OverlayType.RECTANGLE，drawingControl：true，drawingControlOptions：{position：google.maps.ControlPosition.TOP_CENTER，drawingModes：['rectangle']} }）; drawingManager.setMap（地图）; google.maps.event.addListener（drawingManager，rectanglecomplete，function（rectangle）{function distanceInPx（pos1，pos2）{var p1 = map.getProjection（）。fromLatLngToPoint（pos1）; var p2 = map.getProjection（）。 fromLatLngToPoint（pos2）; var pixelSize = Math.pow（2，-map.getZoom（））; var d = Math.sqrt（（p1.x-p2.x）*（p1.x-p2.x）+（ （）;}} / pixelSize; return Math.round（d）;} var zoom = map.zoom; var center = rectangle.getBounds（）。getCenter（） ; //矩形是在地图上绘制的形状var spherical = google.maps.geometry.spherical; bounds = rectangle.getBounds（）; //矩形是在地图上绘制的形状var cor1 = bounds.getNorthEast（）; var cor2 = bounds.getSouthWest（）; var cor3 = new google.maps.LatLng（cor2.lat（），cor1.lng（））; var cor4 = new google.maps.LatLng（cor1.lat（），cor2.lng （））; var width = distanceInPx（cor1，cor4）; var height = distanceInPx（cor1，cor3）; var imgUrl =https://maps.googleapis.com/maps / api / staticmap？center =+ centre.lat（）+，+ centre.lng（）+& zoom =+ zoom +& size =+ width +x+ height + &安培;地图类型=卫星&安培;键= AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU; var aElem = document.getElementById（staticLink）; aElem.setAttribute（href，imgUrl）; aElem.style.display = 块; }};}
#map {height：100％; } html，body {height：95％;保证金：0; padding：0;}
< div id =map >< / DIV> < a id =staticLinkhref =＃target =_ blanktitle =显示静态地图style =display：none;>显示静态地图< / a>< script src = //maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=drawing&callback=initMapasync defer>< / script>
这个例子也可以在jsbin中找到： http://jsbin.com/humuko/edit?html,output
我希望这有助于！
I am trying to take the snapshot of an area enclosed by a rectangle drawn on the google map. Is it possible to take the snapshot of the area beneath the rectangle? I have searched for answers but couldn't find any helpful info.
I tried to take the snapshot of the area under rectangle using static map API by specifying the map centre, zoom level, image width and image height. Like https://maps.googleapis.com/maps/api/staticmap?center=CENTER OF THE RECTANGLE&zoom=ZOOM LEVEL OF THE MAP&size=WIDTH AND HEIGHT OF THE RECTANGLE&maptype=satellite&key=API KEY
Here is the code I tried,
var zoom = map.zoom;
var centre = rectangle.getBounds().getCenter(); //rectangle is the shape drawn on the map
var spherical = google.maps.geometry.spherical;
bounds = rectangle.getBounds(); //rectangle is the shape drawn on the map
cor1 = bounds.getNorthEast();
cor2 = bounds.getSouthWest();
cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng());
cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng());
width = spherical.computeDistanceBetween(cor1,cor3);
height = spherical.computeDistanceBetween( cor1, cor4);
Now I downloaded the image using this URL,
"https://maps.googleapis.com/maps/api/staticmap?center=" + centre.lat() + "," + centre.lng() + "&zoom=" + zoom + "&size=" + width + "x" + height + "&maptype=satellite&key=API_KEY"
Original URL : "https://maps.googleapis.com/maps/api/staticmap?center=40.804197008355914,-74.11213619168848&zoom=20&size=26x37&maptype=satellite&key=API_KEY"
I got the image, but the image doesn't include the whole area enclosed by the rectangle(It is too small). what I am doing wrong? Is there any other methods to do it?
The main mistake that you have in your code is that the width and height parameters of Static Maps API must be in pixels. Currently you calculate a distance in meters and pass it in Static Maps URLs instead of pixels.
I created an example based on your sample code and was able to create a correct static maps URL. Please have a look at my example. The distanceInPx function is the most important thing. Create the rectangle with drawing manager and click the Show static map link. Also, note that Static Maps API are limited to 640x640 px image size in Standard plan, so you cannot create a link for rectangles that have a bigger size.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 28.45765, lng: -16.363564},
zoom: 21,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['rectangle']
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, "rectanglecomplete", function(rectangle){
function distanceInPx(pos1, pos2) {
var p1 = map.getProjection().fromLatLngToPoint(pos1);
var p2 = map.getProjection().fromLatLngToPoint(pos2);
var pixelSize = Math.pow(2, -map.getZoom());
var d = Math.sqrt((p1.x-p2.x)*(p1.x-p2.x) + (p1.y-p2.y)*(p1.y-p2.y))/pixelSize;
return Math.round(d);
}
var zoom = map.zoom;
var centre = rectangle.getBounds().getCenter(); //rectangle is the shape drawn on the map
var spherical = google.maps.geometry.spherical;
bounds = rectangle.getBounds(); //rectangle is the shape drawn on the map
var cor1 = bounds.getNorthEast();
var cor2 = bounds.getSouthWest();
var cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng());
var cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng());
var width = distanceInPx(cor1, cor4);
var height = distanceInPx(cor1, cor3);
var imgUrl = "https://maps.googleapis.com/maps/api/staticmap?center=" +
centre.lat() + "," + centre.lng() + "&zoom=" + zoom +
"&size=" + width + "x" + height + "&maptype=satellite&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU";
var aElem = document.getElementById("staticLink");
aElem.setAttribute("href", imgUrl);
aElem.style.display="block";
});
}
#map {
height: 100%;
}
html, body {
height: 95%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<a id="staticLink" href="#" target="_blank" title="Show static map" style="display:none;">Show static map</a>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=drawing&callback=initMap"
async defer></script>
This example is also available at jsbin: http://jsbin.com/humuko/edit?html,output
I hope this helps!
这篇关于在google map javascript下拍摄特定区域的快照的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
