Javascript 如何在google map API v3上自定义地面覆盖图标动画_Javascript_Google Maps_Kml

Javascript 如何在google map API v3上自定义地面覆盖图标动画

javascript google-maps

Javascript 如何在google map API v3上自定义地面覆盖图标动画,javascript,google-maps,kml,Javascript,Google Maps,Kml,我试图通过不断刷新地面覆盖图标来设置其动画。。所以基本上这就是我想要实现的想法。 1.我有一个.png文件，它是我在PIL（python图像库）中使用掩码创建的 2.我每隔10秒用python脚本不断更新.png文件，以更改某些功能（这是一个模拟仪表，所以我基本上每10秒移动一次指示器） 3.我有一个KML文件，用于将.png文件覆盖到谷歌地图中。 4.我希望在KML中使用刷新模式，每隔10秒或每当.png文件被更改时，都可以更改.png文件。我知道我不能在图标的Interval中使用刷新模式，

我试图通过不断刷新地面覆盖图标来设置其动画。。所以基本上这就是我想要实现的想法。 1.我有一个.png文件，它是我在PIL（python图像库）中使用掩码创建的 2.我每隔10秒用python脚本不断更新.png文件，以更改某些功能（这是一个模拟仪表，所以我基本上每10秒移动一次指示器） 3.我有一个KML文件，用于将.png文件覆盖到谷歌地图中。 4.我希望在KML中使用刷新模式，每隔10秒或每当.png文件被更改时，都可以更改.png文件。我知道我不能在图标的Interval中使用刷新模式，但我在refresh onChange或OneExpire中没有任何成功。。。我不知道我做错了什么，这个项目对我来说有点紧急。我已经附上了我的.kml文件

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

更新：

在我尝试使用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>


无标题
#地图画布{宽度：1000px；高度：800px；}
//加载（“地图”，“2.x”）；
var映射；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map_canvas'）；
地图设置中心（新的google.maps.LatLng（36，-120），5）；
mapTypeId:google.maps.mapTypeId.ROADMAP
下载URL（'GET'，'http://dl.dropbox.com/u/20943178/test.xml，函数（数据）{
var xmlDoc=data.responseXML；
var markers=xmlDoc.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i我强烈建议不要为此使用KML。KML是在谷歌服务器上呈现的，这意味着每次你想移动它时，你都会重新下载该图像
相反，使用AJAX获取新坐标，然后使用Maps API V3中的a来显示图标
无论何时您想要移动它，您都需要创建一个新的覆盖，但是图标只会被下载一次
<!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>