Javascript 脱机时用图像替换Google地图

我对javascript相当陌生，我只是想知道是否有一种方法可以在连接丢失时将包含google地图的div更改为静态图像。该代码进行位置跟踪，因此缓存地图对我来说毫无用处。我有一个功能，每10秒更新一次地图（这将在配备移动wifi系统的汽车上使用），但只有在有连接时才会这样做。有没有办法在脱机时将地图更改为图像？我尝试过使用“可见性”和“显示”属性，但地图仍保持不变。我要覆盖的图像是id=“alt\u img”

---

将图像放在地图顶部（z-index）的另一个div中，然后调整它的可见性，而不是真正更改地图本身（这样，您就不必反复重新初始化地图，因为这些将计入地图配额）：

---

您可以定期保存当前地图的图像：

var google_tile = "http://maps.google.com/maps/api/staticmap?sensor=false&center="+
  currentPosition.lat() + "," + currentPosition.lng()+
  "&zoom="+selectedZoom+"&size="+w+"x"+h;
// w=width of canvas/map; h = height

var canvas = document.getElementById("saved_image");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
  context.drawImage(imageObj, 0, 0);
}
imageObj.src = google_tile;

---

现在，画布

saved_image

中包含地图的“屏幕截图”。将其放入函数中，并定期调用它。当连接断开时，显示它。

首先，您需要确定是否存在连接。剩下的就是基于这个结果的简单if语句。如果已连接，则显示地图，否则显示图像。程序启动时将有连接，但由于在移动车辆中使用wifi，因此连接将到处中断。我有代码来测试是否有连接，但我就是无法在没有连接的情况下获得图像来覆盖地图。我无法使其正常工作，我尝试使用显示和可见性。下面是我使用的javascript:if（navigator.onLine）{navigator.geolocation.getCurrentPosition（posSuccess，posError，{enableHighAccurance:true}）；}else{alert（“hidden”）；//用于调试$（'not_connected'））.style.visibility='visible'；}当您使用style.display时，您如何设置它以显示图像<代码>块？不管怎样，问题出在我的javascript中。我将jQuery更改为document.getElementById。。。这就解决了问题。谢谢，我考虑过这样做，但是地图使用了一个标记来跟踪一辆车。我宁愿在连接断开时显示静态图像，也不愿让地图显示车辆在以前的位置。如果内存可用，上面的链接将生成没有任何标记的地图。因为如果你想添加标记，你必须添加额外的参数。

<div id="right_top_div" style="position:absolute; right: 0; width:50%; height:768px; z-index:10; background-color: #FFF" >
    <div id="not_connected" style="position:absolute; right:0; width:100%; height:100%; z-index:15; display:none;"><img src="image_for_no_connection.png"></div>
    <img id="show_more_button" src="images/show_more_button.png" style="position:absolute; left:0;top:38%; width:40px; height:150px; z-index: 12" />
    <img id="alt_img" style="position:absolute;left:0%;visibility:hidden; z-index:10" src="images/greencab_ad.png" />
    <div id="map_canvas" style="position:absolute; right:0; width:100%; height:100%; background-color: #FFF" >
        <img style="position:absolute;left:48%;top:50%; z-index:1" src="images/ajax-loader.gif" />
    </div>

var google_tile = "http://maps.google.com/maps/api/staticmap?sensor=false&center="+
  currentPosition.lat() + "," + currentPosition.lng()+
  "&zoom="+selectedZoom+"&size="+w+"x"+h;
// w=width of canvas/map; h = height

var canvas = document.getElementById("saved_image");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
  context.drawImage(imageObj, 0, 0);
}
imageObj.src = google_tile;