0

うまく機能する次のコードがありますが、問題は 1 つだけです。車両のリストがあり、クリックした車両の位置をマップの中央に配置したいと考えています。問題は、2 台以上の車両をクリックすると、分散が前の車両の情報を保持し、クリックした 2 台以上の車両のいずれかを地図の中心に置くことです。私が望んでいたのは、最新のクリックのみを表示し、以前のクリックをすべて無視することです。いくつかの方法を試しましたが失敗しました。どうすれば修正できますか?ありがとう。

    //Creation de Map
// ------------------
// Enable the visual refresh
google.maps.visualRefresh = true;
// Variables globales
var map = null;
var Table_Pins = {};     // Liste des Pins affichées
var Pos_Info = null;     // Dit sur quel marker se situe l'infobulle
var Liste_Points = []; // Pour la mémorisation du tracé
var route = null;
var markers = [];
var _this = this;
//-----------------------------------------------------------------
function initialize() 
    {
      var mapOptions = {
                zoom: 12,
                center: new google.maps.LatLng(43.665, 7.052),
                mapTypeId: google.maps.MapTypeId.ROADMAP, //Type de carte
                mapTypeControl: true,
                panControl: true,
                zoomControl: true, //Zoom
                scaleControl: true, //Echelle
                scaleControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM},
                streetViewControl: true
                } ;
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);   
    }
//------------------------
// Ouverture du WebBrowser
// -----------------------
try { google.maps.event.addDomListener(window, 'load', initialize);}
catch (ex){ alert("vous devez etre connecte a l'internet...");}
// ------------------------------------------------------------------------------------
//*************************************************************************************
//                          Affichage des véhicules
//*************************************************************************************
// ------------------------------------------------------------------------------------
var infowindows=[];
var title_markers=[];
var openedInfoWindow = null;
var infowindow;
var title_marker;
var TraceBounds = new google.maps.LatLngBounds();
var MarkerBounds = new google.maps.LatLngBounds();
function Affiche_Pin(Lat, Long, immat, type, site, vitesse, date)
    { var myPin = Table_Pins[immat];
        if (typeof myPin != "undefined") 
         {
           myPin.setPosition(new google.maps.LatLng(Lat, Long));
           myPin.html = '<b style="color:green">Véhicule : ' + immat + ' ' + '</b><br>' +
            'Site : ' + site + '<br>' +
            'Type : ' + type + '<br>' +
            'Vitesse : ' + vitesse + ' km/h' + '<br>' +
            'Date : ' + date + '<br>';
           if (Pos_Info == myPin) 
             { infowindow.setContent(myPin.html); 
              infowindow.open(map, marker); } 
         }
// -------------------------------
// Création de la Pin et placement
// -------------------------------
else{
    var imageMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon15.png',
          new google.maps.Size(32, 32),
          new google.maps.Point(0,0),
          new google.maps.Point(16, 32));
    var ombreMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon15s.png',
          new google.maps.Size(56, 32),
          new google.maps.Point(0,0),
          new google.maps.Point(16, 32));

    var vehlatlng = new google.maps.LatLng(Lat, Long) ;
    var marker = new google.maps.Marker({
         map: map,
         position: vehlatlng,
         icon: imageMarqueur,
         shadow: ombreMarqueur           });
    marker.html = '<b style="color:green">Véhicule : ' + immat + ' ' + '</b><br>' +
            'Site : ' + site + '<br>' +
            'Type : ' + type + '<br>' +
            'Vitesse : ' + vitesse + ' km/h' + '<br>' +
            'Date : ' + date + '<br>';
    marker.tooltip_html = '<b style="color:green">Véhicule : ' + immat + ' ' + '</b>';

     infowindow = new google.maps.InfoWindow({
     content: marker.html,    
     position: vehlatlng });

     title_marker = new google.maps.InfoWindow({
     content: marker.tooltip_html,    
     position: vehlatlng });

     markers.push(marker);
    MarkerBounds.extend(marker.position);
     infowindows.push(infowindow);
     title_markers.push(title_marker);
     marker.setMap(map);

// Evenement "Click" et "infowindowopen" du marker
// ---------------------------
  google.maps.event.addListener(marker, 'click', function() {
  if (openedInfoWindow != null) openedInfoWindow.close();  // <-- changed this
  infowindow.setContent(marker.html); 
  infowindow.open(map, marker); 
  Pos_Info = marker;
  // added next 4 lines
  openedInfoWindow = infowindow;
  google.maps.event.addListener(infowindow, 'closeclick', function() {
      openedInfoWindow = null;
  });
});
// Marker show tooltip 
//------------------------------------------------------------------------
        google.maps.event.addListener(marker, 'mouseover', function() {
        title_marker.setContent(marker.tooltip_html); 
        title_marker.open(map, marker); 
  });
  // Marker hide tooltip 
//------------------------------------------------------------------------
        google.maps.event.addListener(marker, 'mouseout', function() {
        title_marker.close(); 
        });
         Table_Pins[immat] = marker;
      }//end else
   }//end function affiche_pin  

// ------------------------------------------------------------------------------------
//**************************************************************************************
//                          On centre le véhicule
//**************************************************************************************
// ------------------------------------------------------------------------------------
var myPin;
function Centrer_Pin(immat) {
     myPin = Table_Pins[immat];
    if (typeof myPin != "undefined") 
            { //var myPins = myPin;
              infowindow.close();
               map.setZoom(13);
               map.setCenter(myPin.getPosition());
               infowindow.setContent(myPin.html); 
               infowindow.open(map, myPin);
     //Position changed ---------------------
       google.maps.event.addListener(myPin, 'position_changed', function() {
       map.panTo(myPin.getPosition());
          if (openedInfoWindow != null) openedInfoWindow.close();  // <-- changed this
          infowindow.setContent(myPin.html); 
          infowindow.open(map, myPin); 
          openedInfoWindow = infowindow;
             google.maps.event.addListener(infowindow, 'closeclick', function() {
             openedInfoWindow = null;
             });
             alert("bomb bomb");
         });
      //Zoom changed -------------------------
        google.maps.event.addListener(map, 'zoom_changed', function() {
        infowindow.close();});  
    }  

}
4

1 に答える 1

0

マーカーをクリックするたびに Centrer_Pin が呼び出されるため、そこから次のリスナーを削除する必要があります

google.maps.event.addListener(myPin, 'position_changed', function() {..

持っているすべてのマーカーに対して一度だけ呼び出す場所に置きます。それはあなたの創造と一緒であるべきですTable_Pins[immat]

あなたが今していることは、同じマーカーに複数のリスナーを追加することです。そのため、あなたが言及したバウンスがあります。追加したすべてのリスナーが呼び出されています。そのため、最初のクリックで機能し、その後はすべてうまくいきません。

于 2013-06-10T14:46:29.060 に答える