Question

我对 Javascript 相当新, 我只是在想, 是否有办法可以将一个有 Google 地图的 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 上方(z-index) 上方的图像,然后你只要调整它的可见度,而不是真正改变地图本身(这样你不必一次又一次地重新开始地图,因为地图定额会算上地图定额):

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

这里, 画布 < code> saveed_ image 现在包含您的地图的“ 抓图 ” 。把它放到一个函数中, 并定期调用它。当连接下降时, 请显示它。

友情链接