2012-02-08 15 views
0

地上オーバーレイアイコンを常にリフレッシュしてアニメーションしようとしています。これは基本的に実装しようとしているアイデアです。 1.私はPIL(python Image Library)のマスキングを使って作成した.pngファイルを持っています。 2.私は10秒ごとにPythonスクリプトで.pngファイルを更新します。基本的に10秒ごとにインジケータを移動します 3. Googleマップに.pngファイルをオーバーレイするために使用するKMLファイルがあります 4.毎回10回後に.pngファイルを変更するためにKMLのリフレッシュモードを使用したいと考えていました秒、または.pngファイルが変更されるたびに表示されます。アイコンにrefreshmode onIntervalを使用することはできませんが、私はrefresh onChangeまたはonExpireで成功しませんでした... 私は何が間違っているのか分かりません。このプロジェクトは私にとって緊急のものです。私は.kmlファイルを添付しました。GoogleマップAPI v3の地上オーバーレイアイコンをアニメーション化するにはどうすればいいですか

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
    <Folder> 
    <name>Meter Overlays</name> 
    <description>Examples of ground overlays</description> 
    <GroundOverlay> 
     <name>Large-scale overlay on terrain</name> 
     <description>Overlay shows Mount Etna erupting 
      on July 13th, 2001.</description> 
     <Icon> 
    <href>http://dl.dropbox.com/u/20943178/meter_one.png?version=1.x</href> 
    <refreshMode>onChange</refreshMode> 
    <refreshInterval>10</refreshInterval> 
    <viewBoundScale>0.45</viewBoundScale> 
     </Icon> 
     <LatLonBox> 
     <north>41.044967</north> 
     <south>38.869125</south> 
     <east>-121.699475</east> 
     <west>-124.375317</west> 
     <rotation>0</rotation> 
     </LatLonBox> 
    </GroundOverlay> 
    </Folder> 
</kml> 

アイコンはGoogleマップに表示されますが、10秒ごとに変更されるわけではありません。変更するためにページ全体をリフレッシュする必要があります。私のHTMLスクリプトは...私はまたに新しいですたJavaScriptである私は、次の行で

var myParser = new google.maps.KmlLayer('http://dl.dropbox.com/u/20943178/meter.kml'); 
myParser.setMap(map); 

UPDATE KMLオーバーレイを作っています:私は、私の問題を解決するために、AJAXを使用する私の試みで

をHTML、Javascript、AJAXの多くを読んでいます...私はこの例をオンラインで見てきました。しかし、明白な理由がないので、地図はロードされません。なぜこのコードがロードされないのか理解する助けがありますか?

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Untitled</title> 
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Refresh" CONTENT="1000"> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 

<style> 
    #map_canvas { width: 1000px; height: 800px; } 
</style> 


<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyCoXqj2n1HGv58B4aImyVa7cbKYuNc4vag&sensor=false"></script> 
<script type="text/javascript"> 
//google.load("maps", "2.x"); 
var map; 


function initialize() { 
    map = new google.maps.Map(document.getElementById('map_canvas')); 
    map.setCenter(new google.maps.LatLng(36, -120),5); 
    mapTypeId: google.maps.MapTypeId.ROADMAP 

    downloadUrl('GET', 'http://dl.dropbox.com/u/20943178/test.xml', function(data) { 
    var xmlDoc = data.responseXML; 
    var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++){ 
    var point = new google.maps.LatLng(parseFloat(markers.[i].getAttribute("lat")), 
    parseFloat(markers.[i].getAttribute("lng"))); 
    var marker = new google.maps.Marker({ 
    map:map, 
    position: point 
       }); 
      } 
     }); 

    } 


function downloadUrl(url, callback) { 
var request = window.ActiveXobject ? 
    new ActiveXObject('Microsoft.XMLHTTP'): 
    new XMLHttpRequest; 

request.onreadystatechange = function(){ 
if (request.readychange = doNothing; 
callback(request, request.status); 
    } 
}; 

request.open('GET', url, true); 
request.send(null); 

function doNothing() {} 


</script> 

</head> 
<body onload="initialize()" <!--onunload="GUnload()"-->> 

<div id="map_canvas"></div> 

</script> 
</body> 
</html> 

答えて

0

この目的でKMLを使用することを強くお勧めします。 KMLはGoogleサーバーにレンダリングされます。つまり、移動するたびにそのイメージを再ダウンロードします。

代わりにAJAXを使用して新しい座標を取得し、Maps API V3のGroundOverlayを使用してアイコンを表示します。

移動するときはいつでも新しいオーバーレイを作成する必要がありますが、アイコンは一度だけダウンロードされます。