javascript - 显示时嵌入的地图（iframe）未居中

Question

我正在构建一个带有多个选项卡/药丸的网页，这些选项卡/药丸显示与数据库中的点有关的表格和地图。这些选项卡之一是 iframe 位置图。默认情况下，此选项卡是隐藏的（显示设置为无）。当用户单击选项卡时，应显示地图。

问题是当您单击选项卡时，地图偏离中心。我认为这是因为当页面加载时，它会加载特定大小的地图元素。单击选项卡时，它会调整 iframe 的大小以填充页面，而无需平移地图。

如何做到这一点，以便当我单击选项卡时，将加载居中？

这是一个显示问题的 gif： https ://imgur.com/FFIEWcf

这是一个代码片段。

<div id="Location" class="occTabcontent">
<style>
                .embed-container {
                    position: relative;
                    width:900px;
                    height:450px;
                }

                .embed-container iframe, .embed-container object, .embed-container iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 900px;
                        height: 450px;
                    }

                small {
                    position: absolute;
                    z-index: 40;
                    bottom: 0;
                    margin-bottom: -15px;
                }
            </style>
            <div class="embed-container" style="border: 1px solid #d4c7cf;height:450px">

            <iframe frameborder="0" title="MineralOccurrenceFeeder-Webmap" src="//yukon2.maps.arcgis.com/apps/Embed/index.html?webmap=d5ed3bcdb3be41e2a22364d549b6cc0f&amp;legend=true&amp;basemap_toggle=true&amp;zoom=true&amp;scale=true&amp;disable_scroll=true&amp;theme=light&center=@longDD,@latDD&level=12&amp;marker=@longDD,@latDD"></iframe>
            </div>
            <div class="mapLink"><a href="http://yukon2.maps.arcgis.com/home/webmap/viewer.html?webmap=d5ed3bcdb3be41e2a22364d549b6cc0f&center=@longDD,@latDD&level=14&marker=@longDD,@latDD" target=" _blank">Open map in larger window.</a></div>
        }
        </div>
</div>

<script type="text/javascript">  
        document.getElementById("defaultOpen").click();

        function openTab(evt, tabName) {
            var i, tabcontent, occTab;
            tabcontent = document.getElementsByClassName("occTabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            occTab = document.getElementsByClassName("occTab");
            for (i = 0; i < occTab.length; i++) {
                occTab[i].className = occTab[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        } 
</script>

标签： javascriptjqueryhtmlcssiframe