当 img 设置为最大宽度时,Google map 无法将位置居中。有一个解决方案,就是把
#map_canvas img {
max-width: none;
}
但这似乎对我不起作用,因为我没有使用 Javascript API,所以似乎没有 map_canvas。我只是使用 iFrame 嵌入。
当我尝试在 iframe 周围添加一个 div 并设置参数时,我仍然得到相同的结果。
我不确定要编写/附加什么才能让 google maps iframe 很好地播放。
最佳答案
您使用的是交互式 map iframed 还是您正在使用 iframing 的静态谷歌地图图像?
如果您使用带有 iframe 的交互式谷歌地图,您需要确保在 map 变量中声明“center”属性。不幸的是, map 只会在页面初始加载时居中,这意味着如果您以高分辨率加载页面然后缩小 map 将偏离中心,因为创建 map 时中心被定义为不同的位置(以较小的分辨率刷新可以解决此问题。)
对于交互式 Google map
// Google Maps
var map;
function initialize() {
var mapOptions = {
zoom: 17,
draggable: true,
center: new google.maps.LatLng(38.913914,-94.637427), // this one
mapTypeId: google.maps.MapTypeId.ROADMAP
};
对于静态 Google map 图像
当声明图像 src 时,它应该看起来像这样:
<img src="maps.googleapis.com/maps/api/staticmap?center=46168&zoom=11
&size=300×300&maptype=roadmap&sensor=false" alt="google map" />
您所做的只是更改一些值,您可以将此 map 放置在任何您喜欢的位置。
居中选项
- 城市/州:印第安纳州普莱恩菲尔德
- 邮政编码:46168
- 地址:1917 Hawthorn Drive, Plainfield, IN
- 经纬度:39.77,-86.16
关于jquery - 谷歌地图 Iframe 嵌入在 bootstrap/foundation 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13684318/