ウェブページをリロードせずにマーカーを更新するgoogle maps v3

まず、貧しい人の英語を謝っていますが、私の質問にはすべてのフランス語フォーラムで答えが見つかりません。ウェブページをリロードせずにマーカーを更新するgoogle maps v3

私は、車両群のリアルタイム追跡を行うアプリケーションを開発しています。

私はこのアプリケーションの最後ですが、問題があります。私は私のウェブページをリロードせずにマーカを更新することはできません。

私はsettimeout()と試みたが、それはまだここに私マップ

充電は私のコードであるあなたの助けをありがとうございました。

PS：完了したときに、このアプリケーションが使用してあなたがマーカーのデータを返すressource（PHPスクリプトかもしれない）（tableauLieux）を要求する必要があります

<html lang="fr"> 
    <head> 
    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="theme.css"/> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <meta charset="UTF-8" /> 
     <title>Geonano V1</title> 
     <style type="text/css"> 
      html{height: 100%} 
      body{height: 100%; margin: 0px; padding: 0px} 
      #EmplacementDeMaCarte{height: 100%} 
     </style> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
      function initialisation() { 
       var tableauLieux = [ 
//here I have a loop in php to get my markers in my database 

["Paris",  48.86110, 2.34459], 
["Versailles",  48.78199, 2.11045] 


       ]; 
       var optionsCarte = { 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte); 
       var bounds = new google.maps.LatLngBounds(); 
       for (var i = 0; i < tableauLieux.length; i++) { 
        var Lieu = tableauLieux[i]; 
        var pointLieu = new google.maps.LatLng(Lieu[1], Lieu[2]); 
        bounds.extend(pointLieu); 
        var marqueurLieu = new google.maps.Marker({ 
         position: pointLieu, 
         map: maCarte, 
         title: Lieu[0], 
         icon : Lieu[3], 
         clickable: true 

        }); 
        //création de l'info-bulle 
        var infoBulle = new google.maps.InfoWindow({ 
        content: Lieu[0]//ici on peut mettre des balises HTML 
        }); 
       google.maps.event.addListener(marqueurLieu, 'click', function() { 
      infowindow.setContent(Lieu[i][0]); 
      infoBulle .open(maCarte,marqueurLieu); 
      }); 
       } 

       maCarte.fitBounds(bounds); 
      } 

      google.maps.event.addDomListener(window, 'load', initialisation); 
      setInterval("initialisation()", 5000); 
     </script> 
    </head> 

    <body> 
     <div id="EmplacementDeMaCarte"></div> 



    </body> 
    <META HTTP-EQUIV="Refresh" CONTENT="120; URL=http://localhost/geonano.php"> 
</html>

出典

2012-03-06 user1251986

ようなものを使っているし、それはです無料のAPIキーを使用するには、[利用規約]（http://code.google.com/apis/maps/terms.html#section_10_2）を参照してください。 –

英語を使用してコードを作成すると、次のコードでは誰がこのコードで作業するのか分かりません。 – MJB

オープンソースで利用できるようになりますAJAX。

回答が得られたら、現在のマーカーを削除して新しいマーカーを作成します。

出典

2012-03-06 11:41:16

正しく理解すれば、すべてのマーカーで5秒ごとに地図を再描画しています。

あなたがしたいことは、後でループして緯度と経度を変更できる配列にマーカーを保存することです。それらを地図から消去し、情報を変更して地図に戻します。情報を変更するには、いくつかのajaxが必要です。

marker.setMap(null);

出典

2012-03-06 11:42:50

助けてくれてありがとう、私はあなたの方法を理解していますが、私はjavascriptで実装できません。ありがとうございました – user1251986

DBからマーカーを取得するためにPHPループを5秒ごとに呼び出す関数を作成します。私は前のマーカーをクリアするのが最善だと思います。 map.clearOverlays（）; これまでのようにマーカーを再描画してください。この方法で、それらを保存する必要はなく、更新は不要です。 –

マーカーの配列をループしてクリアする必要があります。私はmap.clearOverlays（）とは思わない。 v3で動作します。 –

それを行うための良い方法では、Enterpriseライセンスが必要車のリアルタイム追跡のためのAPI（クライアントID）を使用することを忘れないでください

refreshIntervalId = setInterval("requestPoints()", 4000); 

function requestPoints() { 
    $.ajax({ 
     url:'{% url 'gpstracking.ajax.request_tracks' %}', 
     type: 'get', 
     dataType: 'json', 
     data: { 
      vehicles: vehicles 
     }, 
     success: function (positions) { 
      updatePoints (positions); 
     } 
    }); 
} 

function updatePoints (positions) { 
    console.debug('updating markers'); 
    var lttd; 
    var lgtd; 
    for (var i=0; i < positions.length; i++) { 
     lttd = positions[i].latitude; 
     lgtd = positions[i].longitude; 
     position = map.createPosition({ 
      lat: lttd, 
      lng: lgtd, 
     }); 
     markers[positions[i].registration].setPosition(position); 
    }; 
    if (positions.length > 1) { 
     //map.fitZoom(); 
    } else { 
     map.setCenter (lttd, lgtd); 
    } 
}

出典

2013-05-08 22:06:23 Carlos

ウェブページをリロードせずにマーカーを更新するgoogle maps v3

答えて

関連する問題