隐藏谷歌地图元素并显示离线地图图像相同的地方，反之亦然[重复]

Posted 2023-05-07

【中文标题】隐藏谷歌地图元素并显示离线地图图像相同的地方，反之亦然[重复]

【英文标题】：hide Google Map element and display offline map image SAME place and vice versa [duplicate]

【发布时间】：2018-02-26 08:16:33

【问题描述】：

我是一名 macOS 开发人员，正在学习使用 javascript 编写 Fitbit Ionic 手表的代码。我尝试了在线/离线地图应用程序测试。当在线地图和离线IMAGE地图在html中并排显示时，它可以工作。

<table border="0" cellpadding="0" cellspacing="0">
<td>
    <div id="mymap" style="width: 348px; height: 250px;  position: relative; overflow: hidden;"></div>
</td>
<td>
    <div style="width: 348px; height: 250px; position: relative; overflow: hidden;"> 
    <img id="partImage"  style="transform:scale(0.5); position: absolute" />
    </div>           
</td>
</table>

<script type="text/javascript">
    //...
    function OfflineIt()
        //...   
        //grab statics map image and processing
        //saved map image is 1280x1280 in size
        //...
        document.getElementById('mymap').style.visibility ='hidden';
        document.getElementById('partImage').style.visibility ='visible';
        //...
    
</script>

第二个 div 是 348x250 并像第一个 div 一样正确显示我的 1280x1280 离线地图的一部分。在线地图的隐藏功能也在起作用。但是，当我尝试删除第二个 div 并将我的 img 移动到第一个 div 时，我的离线图像窗口将以 1280x1280 的全尺寸显示，而不是请求的 348x250。

<td>
    <div id="mymap" style="width: 348px; height: 250px;  position: relative; overflow: hidden;">
    <img id="partImage"  style="transform:scale(0.5); position: absolute" />
</div>
</td>

如何将在线地图 div 替换为离线图像 div 并正确显示图像？

【参考方案1】：

这回答了我的问题： How to show or hide an element: display & visibility

希望对其他人有所帮助，谢谢！

我的最终代码是：

document.getElementById('mymap').style.display ='none';
document.getElementById('partImage').style.display ='block';

...

<td>
        <div id="mymap" style="width: 348px; height: 250px; "></div>
        <div id="myimage" style="width: 348px; height: 250px; position: relative; overflow: hidden;"> 
        <img id="partImage"  style="transform:scale(0.5); position: absolute; " />    
        </div>
</td>