Question

我正在尝试使用带有小册子的谷歌地图静态API生成的瓷砖（我需要提前生成一些瓷砖，因为它们将在没有互联网连接的情况下脱机使用）。

例如，要使用缩放级别8在lat / lng（54.217，-4.5373）创建以马恩岛为中心的640x640磁贴，我使用以下请求网址：https://maps.googleapis.com/maps/api/staticmap?center=54.217,-4.5373&zoom=8&size=640x640&maptype=roadmap

生成的图块如下所示：

接下来我想将这个图块与传单一起使用，并使用以下代码在图块的中心添加一个标记：

 <html>
<header>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/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>

然而，似乎结果地图完全是偏离中心的＃34;如下图所示（标记也应该在人的岛上）。不确定我在这里做错了什么：

任何帮助都将非常感谢！谢谢！

Answer 1

首先，考虑来自＆＃34;静态地图API＆＃34;的图像。不是瓷砖：你可以要求任意尺寸，并且没有简单的方案将这些图像拼接在一起。瓷砖工作得很好，因为当一个瓷砖结束时，另一个瓷砖开始。瓷砖需要一个网格，就像TMS specification中解释的那样。

其次，因为它们不是瓷砖，所以使用L.TileLayer并不是最好的方法。对于适合地图投影方案的面向北方的图像，可以使用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]) ));

获得图片叠加层和边界的网址后，将其添加到地图中，它应为look like this。

最后，请注意terms and conditions for stuff coming from the google maps API，特别是：

10.5.d 无缓存或存储。您不会预取，缓存，索引或存储任何要在服务外使用的内容，[...]

另请注意，其他网络地图平台没有这些限制。

如何正确使用谷歌地图静态瓷砖与传单

1 个答案: