Google地圖onclick infowindow在刷新週期後消失

Question

此地圖用於在單個視圖中跟蹤多個標記。標記必須從服務器每5秒更新一次。 每次刷新後，我的infowindow都會消失。每5秒發出一次json請求。當我點擊標記時，infowindow就會出現，並在下一次json調用時立即清除。我可以設計一種方法/任何解決方案，使其即使在刷新後也能顯示（動態）。

var map1; 
function map1_initialize() 
{  
    setInterval(function() { 
     var lat=new Array();var lng=new Array();var latlng = []; 
$.getJSON('web_services/latlong.php?option=4&user_id=<?php echo $user_id;?>', function(json) { 
      $.each(json.Result.Data,function(i,gmap){ 

    lat[i]=gmap.latitude; 
    lng[i]= gmap.longitude; 
    latlng[i] = new google.maps.LatLng(lat[i], lng[i]); 
/*google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(json.Result.Data[i].alias); 
       console.log(json.Result.Data[i]); 
       infowindow.open(map, marker); 
      } 
       })(marker, i)); */ 


    if (google.maps.BrowserIsCompatible())  
    {  
    map1 = new google.maps.Map2(document.getElementById('map'));  
    map1.addControl(new google.maps.LargeMapControl3D());  
    map1.addControl(new google.maps.MenuMapTypeControl());  
    map1.setCenter(new google.maps.LatLng(0, 0), 0);  
     for (var i = 0; i < latlng.length; i++)  
     {   
     var marker = new google.maps.Marker(latlng[ i ]); 

     map1.addOverlay(marker); 

     }  

     var latlngbounds = new google.maps.LatLngBounds();  

     for (var i = 0; i < latlng.length; i++)  
     {   
     latlngbounds.extend(latlng[ i ]);  

     }  
     map1.setCenter(latlngbounds.getCenter(), map1.getBoundsZoomLevel(latlngbounds)); 

     GEvent.addListener(marker, 'click', function() { 
       // When clicked, open an Info Window 
      //alert(gmap.alias); 
       marker.openInfoWindowHtml(gmap.alias); 
      }); 
//gmap.alias is the alias name for the marker-loading it via json response 

    } 

    }); 

}); 


}, 5000); 



} 

Answer 1

有了很多[R & d的，我找到了答案！希望這可以幫助別人......

var json=[]; 
    function initialize() { 

// Create the map 
// No need to specify zoom and center as we fit the map further down. 
var map = new google.maps.Map(document.getElementById("map_canvas"), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false 
}); 

/*jQuery.extend({ 
getValues: function(url) { 
    var result = null; 
$.getJSON('web_services/latlong.php?option=4&user_id=21', function(json) { 
    result = json; 
      }); 
    return result; 
} 
});*/ 

    jQuery.extend({ 
getValues: function(url) { 
//setInterval(function() { 
    var result = null; 
    $.ajax({ 
    url: url, 
    type: 'get', 
    dataType: 'json', 
    async: false, 
    success: function(data) { 
     result = data.Result.Data; 
    } 
}); 
return result; 
//},5000); 
} 

}); 



setInterval(function() { 
var markers=$.getValues("web_services/latlong.php? option=4&user_id=21");console.log(markers); 





// Define the list of markers. 
// This could be generated server-side with a script creating the array. 
/*var markers = [ 
    { lat: -33.85, lng: 151.05, name: "marker 1" }, 
    { lat: -33.90, lng: 151.10, name: "marker 2" }, 
    { lat: -33.95, lng: 151.15, name: "marker 3" }, 
    { lat: -33.85, lng: 151.15, name: "marker 4" } 
];*/ 

// Create the markers ad infowindows. 
for (index in markers) addMarker(markers[index]); 
function addMarker(data) { 
    // Create the marker 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(data.latitude, data.longitude), 
    map: map, 
    title: data.alias 
    }); 

    // Create the infowindow with two DIV placeholders 
    // One for a text string, the other for the StreetView panorama. 
    var content = document.createElement("DIV"); 
    var title = document.createElement("DIV"); 
    title.innerHTML = data.alias; 
    content.appendChild(title); 

    var infowindow = new google.maps.InfoWindow({ 
    content: content 
    }); 

    // Open the infowindow on marker click 
    google.maps.event.addListener(marker, "click", function() { 
    infowindow.open(map, marker); 
    }); 

    // Handle the DOM ready event to create the StreetView panorama 
    // as it can only be created once the DIV inside the infowindow is loaded in the DOM. 
/* google.maps.event.addListenerOnce(infowindow, "domready", function() { 
    var panorama = new google.maps.StreetViewPanorama(streetview, { 
     navigationControl: false, 
     enableCloseButton: false, 
     addressControl: false, 
     linksControl: false, 
     visible: true, 
     position: marker.getPosition() 
    }); 
    });*/ 
} 

// Zoom and center the map to fit the markers 
// This logic could be conbined with the marker creation. 
// Just keeping it separate for code clarity. 

var bounds = new google.maps.LatLngBounds(); 
for (index in markers) { 
    var data = markers[index]; 
    bounds.extend(new google.maps.LatLng(data.latitude, data.longitude)); 
} 
map.fitBounds(bounds); 
},5000);//call every of 5 secs. 
    }