1

私はJavaScriptにかなり慣れていないので、接続が失われたときにGoogleマップを含むdivを静的画像に変更する方法があるかどうか疑問に思っています. コードは位置追跡を行うため、マップをキャッシュしても役に立たないでしょう。10 秒ごとにマップを更新する機能があります (これはモバイル Wi-Fi システムを備えた車で使用されます) が、接続がある場合にのみ更新されます。オフライン時にマップを画像に変更する方法はありますか? 可視性と表示のプロパティを使用してみましたが、マップはそのままです。重ねたい画像は 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 に答える