Question

例如，如果您使用嵌入式谷歌地图。

您可以使用以下代码对Google地图进行响应

使用iframe（简单的iframe）

<div class="ggmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.5451230493!2d-84.42060395!3d33.7677129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1396981185525" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

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

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

但是我通过javascript使用google地图，如下所示。

没有iframe（简单的无iframe）

 <div id="map_canvas" style="width:600px; height:450px"></div>

function writeMap(latitude,longitude) {
  var latlng = new google.maps.LatLng(latitude,longitude);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

$(document).ready( function(){
        writeMap(latitude,longitude);       
});

在这种情况下，谷歌地图无法响应。

如何让这张谷歌地图响应？

Answer 1

制作容器的高度和宽度百分比（并确保容器的大小）。

＆＃13;

var latitude = 42.0;
var longitude = -72.0;
function writeMap(latitude,longitude) {
  var latlng = new google.maps.LatLng(latitude,longitude);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

$(document).ready( function(){
        writeMap(latitude,longitude);       
});

＆＃13;

body, html, #map_canvas {
  height: 100%;
  width: 100%;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" ></div>

＆＃13;

谷歌地图响应没有iframe

1 个答案: