logo标签列表

响应式谷歌地图？

google-mapsresponsive-design
45

如何从代码中制作一个响应式的谷歌地图

<div class="map">
    <iframe>...</iframe>
</div>

我在CSS中用于全图

.map{max-width:100%;}

和小型设备

.map{max-width:40%;}

但是它没有起作用。

有人有想法吗？谢谢。

13个回答
66
将以下内容添加到您的初始化函数中：
<script type="text/javascript">

function initialize() {

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  // Resize stuff...
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
  });

}

</script>
我不确定这方面的性能如何，但你无论如何得到了我的好评。 - Tom Roggero
10
如果您选择这个选项，应该把它包裹在setTimemout中，以便它不会持续运行。例如：var resizeTimeout; google.maps.event.addDomListener(window, "resize", function() { if (resizeTimeout) { clearTimeout(resizeTimeout); } resizeTimeout = setTimeout(function() { /* 进行调整大小 */ }, 250); }); - Walf
2
由于某些原因，当调整大小的内容被包裹在setTimeout函数中时，它会停止工作。 - Arsen K.
3
这可能听起来很愚蠢，但我该怎样将这个代码添加到我的“初始化函数”中？我尝试将它添加到我的头文件中，与我的其他脚本放在一起，但我一直收到语法错误的提示。请问我应该把这段代码放在哪里？ - 210 USA
记得在调整大小完成后，您可以随时删除事件侦听器。例如：`function remove(){ EventTarget.removeEventListener(window, 'resize', ()=>{ //在此处处理设置完成的尺寸。 }) }` - Ryan Hamblin
非常完美！喜欢这个答案！ - Imdad
63

将iframe的宽度和高度属性增加100％对我总是有效的。例如：

<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=+&amp;q=surat&amp;ie=UTF8&amp;hq=&amp;hnear=Surat,+Gujarat&amp;ll=21.195,72.819444&amp;spn=0.36299,0.676346&amp;t=m&amp;z=11&amp;output=embed"></iframe><br />
1
显然，在早期版本的HTML中允许这样做，但在HTML5中，宽度必须用像素表示。http://www.w3schools.com/tags/att_iframe_width.asp - droo46
2
简单、美观的解决方案。KISS - menardmam
2
这适用于所有iframe，如YouTube嵌入等。谢谢@Nimsrules - Alaa Sadik
29

没有使用JavaScript的解决方案：

HTML：

<div class="google-maps">
<iframe>........//Google Maps Code//..........</iframe>
</div>

CSS：

.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

如果您有自定义地图大小，请删除 "height: 100% !important"。

这是一个好的解决方案。使用2600像素的iframe；.google-maps { overflow-hiddem; width:100%; } .google-maps iframe { left:50%; margin-left: -1300px } 谢谢你的想法。 - Bruno Pitteli Gonçalves
9

最好使用谷歌地图API。

我已经在这里创建了一个示例：http://jsfiddle.net/eugenebolotin/8m1s69e5/1/

关键功能是使用函数：

//Full example is here: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/

map.setCenter(map_center);
// Scale map to fit specified points
map.fitBounds(path_bounds);

它处理调整大小事件并自动调整大小。

1
你的例子很好。如果你能够在不必存储“path_bounds”的情况下调整大小，那就更好了，因为在我的情况下，管理“path_bounds”非常困难。 - ihimv
6
在 iframe 标签中，您可以轻松地添加 width='100%' 而不是由地图赋予您的预设值。
就像这样：
 <iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
3

请查看以下解决方案：http://jsfiddle.net/panchroma/5AEEV/

不过，这段代码并非我所写，它来自于快速简便的方法使Google Maps iframe嵌入响应式。

祝你好运！

CSS

#map_canvas{
width:50%;
height:300px !important;
}

HTML

    <!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8"/>
    <style>
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
我已经寻找了一段时间来获得这个解决方案，似乎谷歌地图不支持宽度和高度都是百分比。但你的解决方案确实奏效了，万岁！ - Martin
2
这里提供一个标准的CSS解决方案+JS来调整地图的高度。
CSS：
#map_canvas {
   width: 100%;
}

JS

// On Resize
$(window).resize(function(){ 
    $('#map_canvas').height($( window ).height());

JsFiddle demo : http://jsfiddle.net/3VKQ8/33/

1

我认为最简单的方法是添加这个CSS，它会完美地工作。

embed, object, iframe{max-width: 100%;}
我认为它不会。高度不成比例地改变。 - MEM
你总是需要指定高度，或者添加媒体查询以在不同的屏幕尺寸上创建不同的高度。 - Aslam
0
尝试使用CSS，但它从来都不是100%响应式的，所以我建立了一个纯JavaScript解决方案。这个解决方案使用了jQuery。
google.maps.event.addDomListener(window, "resize", function() {

  var center = map.getCenter();

  resizeMap();

  google.maps.event.trigger(map, "resize");
  map.setCenter(center);

});



function resizeMap(){

  var h = window.innerHeight;
  var w = window.innerWidth;

  $("#map_canvas").width(w/2);
  $("#map_canvas").height(h-50);

}
0

使用CSS实现响应式 您可以使用以下CSS代码使Iframe具有响应式。

.map {
    position: relative;
    padding-bottom: 26.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.map iframe,
.map object,
.map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript响应式设计

通过window.resize事件实现可能，并且您可以将其应用于谷歌地图，如下所示：google.maps.event.addDomListener(window, 'resize', initialize);

考虑以下示例：

function initialize() {
    var mapOptions = {
           zoom: 9,
           center: new google.maps.LatLng(28.9285745, 77.09149350000007),  
           mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    
    var map = new google.maps.Map(document.getElementById('location-canvas'), mapOptions);
    var marker = new google.maps.Marker({
           map: map,
           draggable: false,
           position: new google.maps.LatLng(28.9285745, 77.09149350000007)
     });
}
google.maps.event.addDomListener(window, 'resize', initialize);

请查看更多详细信息 - https://webomnizz.com/how-to-make-responsive-google-map-with-google-map-api/

这段程序相关的内容会引起内存泄漏，因为没有处理地图和标记元素的释放。你真的应该使用google.maps.event.trigger(map, "resize"); - Oleksii Aza
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接