Question

我对javascript很新，我只是想知道是否有办法将连接丢失的静态图像更改为具有谷歌地图的div。代码进行位置跟踪，因此缓存地图对我来说毫无用处。我有一个每10秒更新一次地图的功能（这将用于带有移动wifi系统的汽车），但只有在有连接时才会这样做。我有办法在离线时将地图更改为图像吗？我已尝试使用可见性和显示属性，但地图仍然存在。我要叠加的图片是id =“alt_img”

<div id="right_top_div" style="position:absolute; right: 0; width:50%; height:768px; z-index:10; background-color: #FFF" >
    <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>
</div>

Answer 1

如果将图像放在地图顶部（z-index）的另一个div中，那么你只需调整它的可见性，而不是真正改变地图本身（这样你就不必重新 - 一遍又一遍地初始化地图，因为那些将计入您的地图配额）：

<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>

Answer 2

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

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现在包含你地图的“截图”。把它放到一个函数中，并定期调用它。当连接断开时，显示相反。

离线时将Google地图替换为图片

2 个答案: