如何从代码中制作一个响应式的谷歌地图
<div class="map">
<iframe>...</iframe>
</div>
我在CSS中用于全图
.map{max-width:100%;}
和小型设备
.map{max-width:40%;}
但是它没有起作用。
有人有想法吗?谢谢。
如何从代码中制作一个响应式的谷歌地图
<div class="map">
<iframe>...</iframe>
</div>
我在CSS中用于全图
.map{max-width:100%;}
和小型设备
.map{max-width:40%;}
但是它没有起作用。
有人有想法吗?谢谢。
<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>
将iframe的宽度和高度属性增加100%对我总是有效的。例如:
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=+&q=surat&ie=UTF8&hq=&hnear=Surat,+Gujarat&ll=21.195,72.819444&spn=0.36299,0.676346&t=m&z=11&output=embed"></iframe><br />
没有使用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"。
最好使用谷歌地图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);
它处理调整大小事件并自动调整大小。
<iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
请查看以下解决方案: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>
#map_canvas {
width: 100%;
}
JS
// On Resize
$(window).resize(function(){
$('#map_canvas').height($( window ).height());
JsFiddle demo : http://jsfiddle.net/3VKQ8/33/
我认为最简单的方法是添加这个CSS,它会完美地工作。
embed, object, iframe{max-width: 100%;}
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实现响应式 您可以使用以下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/
setTimemout
中,以便它不会持续运行。例如:var resizeTimeout; google.maps.event.addDomListener(window, "resize", function() { if (resizeTimeout) { clearTimeout(resizeTimeout); } resizeTimeout = setTimeout(function() { /* 进行调整大小 */ }, 250); });
- Walf`function remove(){ EventTarget.removeEventListener(window, 'resize', ()=>{ //在此处处理设置完成的尺寸。 }) }`
- Ryan Hamblin