谷歌地图onclick信息窗口在刷新周期后消失

发布于 2024-12-17 01:28:10 字数 2052 浏览 0 评论 0原文

该地图用于在单个视图中跟踪多个标记。标记必须每 5 秒从服务器更新一次。 每次刷新后我的信息窗口都会消失。每5秒就有一个json请求。当我单击标记时,信息窗口会出现,并在下一次 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);



}  

This map is to track multiple markers in a single view. The markers have to be updated every 5 seconds from the server.
My infowindow disappears after each refresh. There is a json request every 5 seconds. when i click on the marker, the infowindow appears and is cleared as soon as during next json call. Can i devise a method/any solution to make it appear(dynamic) even after refreshing.

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);



}  

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

走过海棠暮 2024-12-24 01:28:10

经过大量的研发,我找到了答案!希望这可以帮助某人......

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.
  }

With lot of R&D, i found out the answer!!!Hope this might help somebody...

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.
  }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文