1

我对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>
4

2 回答 2

2

将图像放在地图顶部（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>

于 2012-05-25T14:05:45.113 回答
1

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

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现在包含地图的“屏幕截图”。将其放入一个函数中，并定期调用它。当连接断开时，改为显示。

于 2012-05-25T16:52:23.133 回答