正文 

当前位置： 首页 > 知识 >

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

     2023-05-07     174

关键词：

【中文标题】隐藏谷歌地图元素并显示离线地图图像相同的地方，反之亦然[重复]【英文标题】：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>

【讨论】：

听一个复选框并在谷歌地图上显示/隐藏圆形（AngularJS）

】听一个复选框并在谷歌地图上显示/隐藏圆形（AngularJS）【英文标题】：Listentoacheckboxandshow/hidecircle-shapeongoogle-maps(AngularJS)【发布时间】：2017-10-1505:04:56【问题描述】：我的问题与这个较旧的线程GoogleMapsv3settingacirclewitheditableradi... 查看详情

通过电子邮件发送谷歌静态地图

】通过电子邮件发送谷歌静态地图【英文标题】：Sendgooglestaticmapviaemail【发布时间】：2015-05-2023:50:15【问题描述】：我可以在我的网站中显示谷歌静态地图图像。我创造了<imgsrc="url"/>在电子邮件中使用相同的url。图像的显示... 查看详情

在谷歌地图中隐藏纬度和经度

】在谷歌地图中隐藏纬度和经度【英文标题】：HidingthelatitudeandlongitudeinaGoogleMap【发布时间】：2011-07-1419:19:59【问题描述】：我正在制作一个谷歌地图，它会在地图上显示一个应该对用户保密的地点。所以我的问题是如何在我的... 查看详情

如何使用谷歌地方 api 获得与谷歌地图相同的结果

】如何使用谷歌地方api获得与谷歌地图相同的结果【英文标题】：Howtogetthesameresultofgooglemapsusinggoogleplacesapi【发布时间】：2017-06-0823:43:25【问题描述】：我必须像这样使用googleplacesapi来实现餐厅位置服务：https://maps.googleapis.com/map... 查看详情

片段更改时如何隐藏地图视图（谷歌地图v2）

】片段更改时如何隐藏地图视图（谷歌地图v2）【英文标题】：Howtohidemapview(googlemapsv2)whenfragmentchanged【发布时间】：2013-10-0201:18:30【问题描述】：我的项目有2个片段（2个选项卡），每个片段都包含MapView。当我从tab1更改为tab2然... 查看详情

谷歌地图查找当前位置和附近的地方

】谷歌地图查找当前位置和附近的地方【英文标题】：Googlemaptofindcurrentlocationandnearbyplaces【发布时间】：2017-06-0713:51:50【问题描述】：我想在我的Android应用中添加一个谷歌地图插件来获取用户的当前位置并显示附近的医院。如... 查看详情

谷歌地图 iOS 的离线模式

】谷歌地图iOS的离线模式【英文标题】：OfflinemodeforGoogleMapsiOS【发布时间】：2016-08-2106:53:17【问题描述】：我正在使用自己的离线图块和GoogleMapsSDK在离线模式下显示它。是否有可能将谷歌地图设置为离线模式？我有一个问题，... 查看详情

谷歌地图离线支持

】谷歌地图离线支持【英文标题】：GoogleMapsofflinesupport【发布时间】：2017-12-0221:30:18【问题描述】：我正在使用GoogleMap片段在我的应用程序中添加地图。根据我们的要求，我们需要支持离线地图。即如果设备离线（未连接到互联... 查看详情

通过服务人员离线显示谷歌地图。

】通过服务人员离线显示谷歌地图。【英文标题】：ShowGooglemapsofflineviaserviceworker.【发布时间】：2018-10-2819:40:12【问题描述】：有没有办法在离线时通过服务人员显示谷歌地图。我已经构建了一个渐进式网络应用程序，它通过serv... 查看详情

谷歌地图 SDK 离线使用

】谷歌地图SDK离线使用【英文标题】：GoogleMapsSDKOfflineuse【发布时间】：2016-12-2112:16:01【问题描述】：在我的项目中，我有一个ViewController，其中显示了带有许多标记的地图(GMSMapView)，有时我会保存标记的坐标，因为我想在设备... 查看详情

显示谷歌地图时隐藏 UiWebview 的地址栏

】显示谷歌地图时隐藏UiWebview的地址栏【英文标题】：HideaddressbarofUiWebviewwhenshowinggooglemapsonit【发布时间】：2011-01-0310:38:08【问题描述】：我正在使用这个在UIWebView上显示地图..NSURL*url=[[NSURLalloc]initWithString:[NSStringstringWithFormat:@"ht... 查看详情

如何使用openlayers3加载谷歌离线地图

参考技术A知识地图是一种知识（既包括显性的、可编码的知识，也包括隐性知识）导航系统，并显示不同的知识存储之间重要的动态联系。它是知识管理系统的输出模块，输出的内容包括知识的来源，整合后的知识内容，知识... 查看详情

经度高度的离线地图？

...：我正在尝试创建一个从某些地图数据库（OpenStreetMap、谷歌地图、雅虎地图）下载地图的C#应用程序然后制作一个API，在下载的地图上显示我的位置，而无需连接到互联网...？我找到了很多谷歌离线地图的例子，但我找不到在下... 查看详情

点击标记时如何更新谷歌地图标记图像

】点击标记时如何更新谷歌地图标记图像【英文标题】：HowtoUpdateGoogleMapsMarkerImagewhentaponthemarker【发布时间】：2019-06-0701:16:43【问题描述】：我想更改标记图标并在点击标记时显示信息窗口。我的问题是如何更改标记图标？我已... 查看详情

谷歌离线地图：不是瓷砖而是javascript

】谷歌离线地图：不是瓷砖而是javascript【英文标题】：googlemapsoffline:nottilesbutjavascript【发布时间】：2013-05-2710:32:35【问题描述】：我有一个HTML(phonegap)应用程序，它使用GoogleMapsAPI来显示带有标记的地图。我希望这个应用程序可... 查看详情

离线使用谷歌地球（或地图）

】离线使用谷歌地球（或地图）【英文标题】：Usegoogleearth(ormap)offline【发布时间】：2014-04-0318:23:04【问题描述】：我在一个地图项目上工作，在世界上使用长/纬度的叠加图像Google-map或Google-earth解决了这个问题，但问题是项目在... 查看详情

Android 谷歌地图 API

】Android谷歌地图API【英文标题】：AndroidGooglemapsAPI【发布时间】：2012-11-2719:55:42【问题描述】：我正在使用GPS地图创建应用程序。在我开始了解如何在我的应用中使用API之前，我有一些问题。我可以在地图上叠加图像，而不让用... 查看详情

如何在 Android 谷歌地图中显示附近的地方，如自动取款机、医院？

】如何在Android谷歌地图中显示附近的地方，如自动取款机、医院？【英文标题】：HowtodisplaynearbyplaceslikeATM\'s,hospitalsinAndroidGoogleMap?【发布时间】：2013-11-2005:47:08【问题描述】：如何在Android谷歌地图中显示附近的地点和地点详情... 查看详情