Question

我需要在不同的断点上更改缩放率以嵌入谷歌我的地图。地图嵌入iframe，就像这样

<iframe src="https://www.google.com/maps/d/embed?mid=ID_here&z=15" width="100%"></iframe>

如您所见，缩放是15，但我需要在移动设备和平板电脑设备上进行更改。

你知道怎么做吗？

Answer 1

也许是这样的：

<!DOCTYPE html>
<html>
  <head><title>test</title></head>
  <body>
    <iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBu9SPYB9qp2PTe1M1_TyBAQN4c-yL8HYQ
    &q=Space+Needle,Seattle+WA&zoom=10" allowfullscreen>
</iframe>
    <script>
        function setEmbeddedMapZoom() {
            var zoomForPhone = 15;
            var defaultZoom = 10;
            var baseSrc = 'https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Space+Needle,Seattle+WA&zoom=';
            if (window.innerWidth < 1600) {
                document.getElementsByTagName('iframe')[0].setAttribute('src', baseSrc + zoomForPhone);
            } else {
                document.getElementsByTagName('iframe')[0].setAttribute('src', baseSrc + defaultZoom);
            }
        }

        window.addEventListener('resize', setEmbeddedMapZoom);
    </script>
  </body>
</html>

http://jsbin.com/tucanayiye/edit?html,output

请注意，我必须确保在我创建API密钥的项目中启用了Embed API。

在不同断点上更改缩放率以嵌入谷歌我的地图

1 个答案: