在谷歌地图javascript下拍摄特定区域的快照
Posted
技术标签:
【中文标题】在谷歌地图javascript下拍摄特定区域的快照【英文标题】:Take snapshot of a specific area under google map javascript 【发布时间】:2018-05-24 15:58:30 【问题描述】:我正在尝试拍摄由谷歌地图上绘制的矩形包围的区域的快照。是否可以拍摄矩形下方区域的快照?我已经搜索了答案,但找不到任何有用的信息。
Rectangle drawn on the map
我尝试使用静态地图 API 通过指定地图中心、缩放级别、图像宽度和图像高度来拍摄矩形下方区域的快照。喜欢 https://maps.googleapis.com/maps/api/staticmap?center=CENTER 矩形&zoom=地图缩放级别&size=矩形宽度和高度&maptype=satellite&key=API 密钥
这是我试过的代码,
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);
现在我使用这个 URL 下载了图片,
"https://maps.googleapis.com/maps/api/staticmap?center=" + center.lat() + "," + center.lng() + "&zoom=" + zoom + "&size=" + width + "x" + height + "&maptype=satellite&key= API_KEY"
原始网址:“https://maps.googleapis.com/maps/api/staticmap?center=40.804197008355914,-74.11213619168848&zoom=20&size=26x37&maptype=satellite&key=API_KEY”
Output image I got
My expected output
我得到了图像,但图像不包括矩形包围的整个区域(它太小)。我做错了什么?有没有其他方法可以做到?
【问题讨论】:
【参考方案1】:您的代码中的主要错误是静态地图 API 的 width
和 height
参数必须以像素为单位。目前,您以米为单位计算距离并将其传递到静态地图 URL 中,而不是像素。
我根据您的示例代码创建了一个示例,并且能够创建正确的静态地图 URL。请看看我的例子。 distanceInPx
函数是最重要的。使用绘图管理器创建矩形,然后单击显示静态地图链接。此外,请注意,静态地图 API 在标准计划中的图像尺寸限制为 640x640 像素,因此您无法为更大尺寸的矩形创建链接。
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>
jsbin 也有这个例子:http://jsbin.com/humuko/edit?html,output
我希望这会有所帮助!
【讨论】:
感谢您的帮助 @xomena - 这会创建一个指向图像的链接,是否有一种简单的方法来检索图像并保存它?以上是关于在谷歌地图javascript下拍摄特定区域的快照的主要内容,如果未能解决你的问题,请参考以下文章