[英]Google maps embed not zooming
我有一個奇怪的問題,我添加到地圖中的Google地圖一直縮小,我找不到原因。
有問題的頁面位於https://workland.ca/en/,然后您轉到站點的頁腳並單擊“聯系”。 以下是我使用的iframe。 我嘗試了&z = 15無效。
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&z=15"
style="width:100%;height:230px; border:0" frameborder="0"></iframe>
如果我以這種方式顯示模態,則地圖的另一個細節很好用,
$(function () {
$('#modalContact').modal('show');
})
頁面加載后奇怪的是,我單擊
<a onclick=" $('#modalContact').modal('show')" href="#">Contact</a>
地圖再次縮小
我發現顯示模態后必須加載解決方案iframe
<script>
$(
function() {
$('#modalContact').on('shown.bs.modal',
function() {
$(this)
.find("#the_map")
.html(' <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&z=20" style="width:100%;height:230px; border:0" frameborder="0"></iframe>')
}
)
}
)
</script>
我發現由於引導框架show方法調用之前加載iframe而引起的縮放問題
您可以按照以下步驟解決:1)將iframe內容作為變量
<script>
var htm ='<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&zoom=1" style="width:100%;height:230px; border:0" frameborder="0"></iframe>';
</script>
2)在寬度和高度固定且大於ifrmae寬度和高度的模態主體中取一格
<div style="width:500px;height:250px;" class="container">
</div>
3)在聯系人上單擊,您必須先顯示彈出窗口,然后用iframe填充容器,例如:
<a onclick=" $('#modalContact').modal('show');$('.container').html(htm);" href="#">Contact</a>
And your issue can solve.
用這個:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&zoom=15" style="width:100%;height:230px; border:0" frameborder="0"></iframe>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.