Question

我是一名macOS开发人员，正在学习用于Fitbit Ionic手表编码的Javascript。我尝试过在线/离线地图应用测试。当在线地图和离线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" 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>

第二个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并正确显示图像？

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

隐藏Google Map元素并显示离线地图图像SAME位置，反之亦然

1 个答案: