用于路线的 Google Maps Embed API - 缩放以适合起点和目的地

Posted 2023-02-23

【中文标题】用于路线的 Google Maps Embed API - 缩放以适合起点和目的地

【英文标题】：Google Maps Embed API for directions - zoom to fit origin and destination

【发布时间】：2018-01-13 12:46:24

【问题描述】：

directions 的 Google 地图 Embed API 并不总是在框架中显示起点和终点。有时默认缩放级别被放大太多。

<iframe 
    src="https://www.google.com/maps/embed/v1/directions?     
        origin=%2020858%20King%20Hezekiah%20Way%20%20Bend%20Oregon%20United%20States&amp;
        destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&amp;
        key=******************************" 
     
    >
</iframe>

（为便于阅读添加了空格。）

差不多的解决办法：

对于 javascript API 版本 3，使用 map.fitBounds()，https://***.com/a/19304625/673991 对于 JavaScript API，使用 map.getBoundsZoomLevel()，https://***.com/a/2362436/673991 使用显式缩放，https://***.com/a/23300810/673991（显式 zoom 参数不是通用解决方案，因为无法知道正确的值。在本例中为zoom=14。）

这是它的外观（例如，使用 zoom=14 或 - 手动缩小）：

这是一个live example。

Embed API 中是否有任何解决方案或变通方法？这是bug 吗？

UPDATE 在 2018 年 2 月，这似乎已得到修复。也就是说，在live example 上，Bad Map 现在看起来与解决方法相同。猜猜这比一个答案或一个过失要好。

【参考方案1】：

<div style="height: 400px">
  <iframe   
    src="https://www.google.com/maps/embed/v1/directions?     
    origin=%2020858%20King%20Hezekiah%20Way%20%20Bend%20Oregon%20United%20States&amp;
    destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&amp;
    key=******************************"  allowfullscreen>
  </iframe>
</div>

你可以这样试试。只需将固定宽度和高度设置为 div 而不是 iframe

【讨论】：

谢谢，尝试一下，将 iframe 设置为填充外部 div。但可惜我不能尝试，因为谷歌似乎已经修复了它。 （而且我今天刚刚修复了指向现场示例的链接，这些链接已损坏。）