我正在尝试使用通过谷歌地图静态 API 生成的图 block 和传单(我需要提前生成一些图 block ，因为它们将在没有互联网连接的情况下离线使用)。
例如，要创建以马恩岛纬度/经度 (54.217, -4.5373) 为中心且缩放级别为 8 的 640x640 图 block ，我使用以下请求 URL:https://maps.googleapis.com/maps/api/staticmap?center=54.217,-4.5373&zoom=8&size=640x640&maptype=roadmap
生成的图 block 如下所示:
接下来，我想将此图 block 与传单一起使用，并使用以下代码在图 block 的中心添加一个标记:
<html>
<header>
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="452920242329203105746b756b77" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://localhost/leaflet.js"></script>
<style>
#map {height: 640px; width:640px;}
</style>
</header>
<body>
<div id="map"></div>
<script type="text/javascript">
$( document ).ready(function() {
// Handler for .ready() called.
console.log("document ready!");
var map = L.map('map').setView([54.217, -4.5373], 8);
L.tileLayer('http://localhost/staticmap.png', {
attribution: 'Copyright Google Maps',
tileSize: 640,
minZoom:8,
maxZoom:8,
continuousWorld: false,
nonoWrap: false,
}).addTo(map);
var marker = L.marker([54.217, -4.5373]).addTo(map);
});
</script>
</body>
</html>
然而，生成的 map 似乎完全“偏离中心”，如下所示(标记也应该位于马恩岛)。不确定我在这里做错了什么:
任何帮助都将不胜感激!谢谢!
最佳答案
首先，请考虑到“静态 map API”中的图像不是图 block :您可以请求任意大小，并且没有简单的方案可以将这些图像拼接在一起。瓷砖效果很好，因为当一个瓷砖结束时，另一个瓷砖开始。瓷砖需要一个网格，就像 TMS specification 中解释的那样。 .
其次，由于它们不是图 block ，因此使用 L.TileLayer 并不是最好的方法。对于适合 map 投影方案的北向图像，可行的方法是使用 L.ImageOverlay .
要使用图像叠加层，您需要计算图像的边界框。对于您的情况，我们可以手动执行此操作，如下所示:
console.log('lat-lng of center:', map.containerPointToLatLng( map.getSize().divideBy(2) ));
console.log('lat-lng of center -320px:', map.containerPointToLatLng( map.getSize().divideBy(2).subtract([320,320]) ));
console.log('lat-lng of center +320px:', map.containerPointToLatLng( map.getSize().divideBy(2).add([320,320]) ));
获得图像叠加层和边界的 URL 后，将其添加到 map 中，它应该 look like this .
最后，请注意terms and conditions for stuff coming from the google maps API ，特别是:
10.5.d No caching or storage. You will not pre-fetch, cache, index, or store any Content to be used outside the Service, [...]
另请注意，其他网络 map 平台没有这些限制。
关于google-maps - 如何正确使用谷歌地图静态图 block 和传单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41739753/