Fatal编程技术网

Google maps 响应谷歌地图？

google-maps responsive-design

Google maps 响应谷歌地图？,google-maps,responsive-design,Google Maps,Responsive Design,如何从代码中创建响应性谷歌地图 <div class="map"> <iframe>...</iframe> </div> 小型设备 .map{max-width:40%;} 但它不起作用 有人知道吗？谢谢。检查此项以获得解决方案： 但是我不能把代码归功于它，它来自于 祝你好运 CSS #map_canvas{ width:50%; height:300px !important; } HTML <!DOCTYPE ht

如何从代码中创建响应性谷歌地图

<div class="map">
    <iframe>...</iframe>
</div>
小型设备

.map{max-width:40%;}
但它不起作用

有人知道吗？谢谢。

检查此项以获得解决方案：

但是我不能把代码归功于它，它来自于

祝你好运

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> 


谷歌地图JavaScript API v3示例：简单地图
html，正文，#地图#画布{
保证金：0；
填充：0；
身高：100%；
}
var映射；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
将此项添加到初始化函数中：

<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>


函数初始化（）{
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
//调整大小的东西。。。
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
var center=map.getCenter（）；
google.maps.event.trigger（map，“resize”）；
地图设置中心（中心）；
});
}
我认为最简单的方法是添加此css，它将完美工作

embed, object, iframe{max-width: 100%;}
在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 />



我的响应[解决方案]谷歌地图在基础4模态


JS

使用以下代码创建一个外部JavaScript文件（即mymap.js）


google.maps.visualRefresh=true//可选的
var-respMap；
函数mymapini（）{
var mapPos=new google.maps.LatLng（-0.172175,1.5）；//设置坐标
var mapOpts={
zoom:10，//您可以根据需要更改此选项
disableDefaultUI:true，//禁用UI控件（可选）
居中：mapPos，//根据坐标将地图居中
mapTypeId:google.maps.mapTypeId.ROADMAP
};
respMap=new google.maps.Map（document.getElementById（'mymap'），
mapOpts）；
var mapMarker=new google.maps.Marker({
位置:mapPos,，
地图:地图,，
标题：“你可以放任何标题”
});
//即使调整窗口大小，也会自动居中到标记
google.maps.event.addListener（respMap'idle'，function（）{
setTimeout（函数（）{
respMap.panTo（mapPos.getPosition（））；
}, 250);    
});
}
google.maps.event.addDomListener（窗口'load'，mymapini）；

$（“#modalOpen”）。单击（function（）{//像使用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响应


function initialize() {
    var lat = 40.759300;
    var lng = -73.985712;
    var map_center = new google.maps.LatLng(lat, lng);
    var mapOptions = {
        center: map_center,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapCanvas = document.getElementById("map_canvas");
    var map = new google.maps.Map(mapCanvas, mapOptions);
    new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(lat, lng)
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(map_center);
    });
}
initialize();


这可以通过
window.resize
event实现，您可以像
google.maps.event.addDomListener（窗口“resize”，初始化）；

考虑以下示例：


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);



查看更多详细信息-
无javascript的解决方案：

HTML:


如果您有自定义的地图大小，请删除“height:100%！important”
尝试使用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);

}



这里有一个标准的CSS解决方案+JS用于地图的高度调整

CSS

JS


JSFIDLE演示：
最好使用谷歌地图API。
我在这里创建了一个示例：

主要功能包括使用以下功能：


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

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



它处理调整大小事件并自动调整大小。
基于eugenemail响应的我的解决方案：

1.HTML-谷歌地图API



4.JavaScript


function initialize() {
    var lat = 40.759300;
    var lng = -73.985712;
    var map_center = new google.maps.LatLng(lat, lng);
    var mapOptions = {
        center: map_center,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapCanvas = document.getElementById("map_canvas");
    var map = new google.maps.Map(mapCanvas, mapOptions);
    new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(lat, lng)
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(map_center);
    });
}
initialize();



我是一个业余爱好者，但我发现这是可行的：


.maps iframe {
    position: absolute;
}

body {
    padding-top: 40px;
    padding-bottom: 820px;
    height: available;
}



底部可能有一些空白，但我很满意
在iframe标记中，您可以轻松添加width='100%'而不是地图给您的预设值

像这样：


 <iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>






虽然我不知道这方面的性能，但你还是得到了我的好评。如果你要使用这个选项，你应该将它包装在
setTimemout
中，这样它就不会连续运行。例如
var resizeTimeout；google.maps.event.addDomListener（窗口，“resize”，函数（）{If（resizeTimeout）{clearTimeout（resizeTimeout）}resizeTimeout=setTimeout（function（）{/*do resizing*/}，250）；}）；
由于某种原因，当resize内容包装在setTimeout函数中时，它停止工作。这可能看起来很愚蠢，但如何将其添加到“Initialize function”中？我尝试将它添加到我的头中，我的其他脚本都在那里，但我不断收到语法错误。我应该将此代码放在哪里？记住，在完成调整大小后，您始终可以删除事件侦听器。例如，
function remove（）{EventTarget.removeEventListener（窗口，'resize'，（）=>{//此处处理已完成尺寸的设置。}
我认为不会。高度不会按比例变化。你必须始终给出高度。或者添加媒体查询以在不同的屏幕大小上创建不同的高度。这会导致内存泄漏，因为无法处理地图和标记元素。你真的应该使用google.maps.event.trigger（地图，“调整大小”）；我一直在寻找这个解决方案，如果宽度和高度都是百分比，谷歌地图似乎不喜欢。但你的解决方案确实有效，不知何故！干杯很明显，这在旧版本的HTML中是允许的，但在HTML5中，宽度必须以像素表示。简单、漂亮的解决方案。这更适合所有iFrame，比如YouTube嵌入等等。谢谢@nimsrulesy你的例子很好。如果你能在不存储路径边界的情况下调整大小，那将是最好的例子

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

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



<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>



<div id="map_canvas"></div>



#map_canvas {
    height: 400px;
}



function initialize() {
    var lat = 40.759300;
    var lng = -73.985712;
    var map_center = new google.maps.LatLng(lat, lng);
    var mapOptions = {
        center: map_center,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapCanvas = document.getElementById("map_canvas");
    var map = new google.maps.Map(mapCanvas, mapOptions);
    new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(lat, lng)
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(map_center);
    });
}
initialize();



.maps iframe {
    position: absolute;
}

body {
    padding-top: 40px;
    padding-bottom: 820px;
    height: available;
}



 <iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>