Javascript 隐藏Google地图元素并在同一位置显示脱机地图图像，反之亦然

我是一名macOS开发人员，正在学习Fitbit Ionic watch编码的Javascript。我尝试了在线/离线地图应用程序测试。当在线地图和离线图像地图在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" alt="" 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>

//...
函数OfflineIt（）{
//...   
//抓取静态地图图像及其处理
//保存的地图图像大小为1280x1280
//...
document.getElementById（'mymap'）.style.visibility='hidden'；
document.getElementById（'partImage'）.style.visibility='visible'；
//...
}

第二个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" alt="" style="transform:scale(0.5); position: absolute" />
</div>
</td>

如何用脱机图像div替换联机地图div并正确显示图像？

这回答了我的问题：

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

我的最终代码是：

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" alt="" style="transform:scale(0.5); position: absolute; " />    
        </div>
</td>

document.getElementById（'mymap'）.style.display='none'；
document.getElementById（'partImage'）.style.display='block'；
...