onclick infowindow的Google地图在刷新周期后消失 [英] Google maps onclick infowindow disappear after refresh cycle

问题描述

这张地图用于在单个视图中追踪多个标记。标记必须从服务器每5秒更新一次。
每次刷新后，我的infowindow都会消失。每5秒发出一次json请求。当我点击标记时，infowindow就会出现，并在下一次json调用时立即清除。我可以设计一个方法/任何解决方案，使它看起来（动态），即使刷新。

  var map1; 
函数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。数据，函数（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]）; （b，b，b，b，b， 
 
 GEvent.addListener（marker，'click'，function（）{
 //点击后，打开一个信息窗口
 //alert（gmap.alias）; 
 marker.openInfoWindowHtml（gmap.alias）; 
}）; 
 //gmap.alias是通过json响应加载标记的别名
 
 
 $ b}）; 
 
}）; 
 
 
}，5000）; 
 
 
 
 
 
 
解决方案< 
 
 
 
 <$ c 
 $ c> var json = []; 
函数initialize（）{
 
 //创建地图
 //我们不需要指定缩放和居中，因为我们将地图向下缩放。 
 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？选项= 4& user_id = 21'，函数（json）{
 result = json; 
}）; 
返回结果; 
} 
}）; * / 
 
 jQuery.extend（{
 getValues：function（url）{
 // setInterval（function（）{
 var result = null; 
 $ .ajax（{
 url：url，
类型：'get'，
 dataType：'json'，
 async：false，
成功：函数（数据） {
 result = data.Result.Data; 
} 
}）; 
返回结果; 
 //}，5000）; 
} 
 
}）; 
 
 
 
 setInterval（function（）{
 var markers = $。getValues（web_services / latlong.php？option = 4& user_id = 21）; console.log（markers）; 
 
 
 
 
 
 //定义标记列表
 //这可以是生成的服务器 -  
 / * var markers = [
 {lat：-33.85，lng：151.05，name：marker 1}，
 {lat：-33.90 ，lng：151.10，名称：marker 2}，
 {lat：-33.95，lng：151.15，name：marker 3}，
 {lat：-33.85，lng：151.15，name ：marker 4} 
]; * / 
 
 //创建标记ad infowindows 
 for（index in marker）addMarker（markers [index]）; 
函数addMarker（data）{
 //创建标记
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（data.latitude，data .longitude），
 map：map，
 title：data.alias 
}）; 
 
 //创建带有两个DIV占位符的infowindow 
 / /一个用于文本字符串，另一个用于街景全景。 
 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 
}）; 
 
 //打开infowindow标记点击
 google.maps.event.addListener（marker，click，function（）{
 infowindow.open（map，marker） ; 
}）; 
 
 //处理DOM ready事件以创建StreetView全景图
 //，因为只有在infowindow中的DIV加载到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（）
}）; 
}）; * / 
} 
 
 //将地图放大并居中以符合标记
 //此逻辑可以与标记创建结合使用。 
 //只是为了代码清晰而保持独立。 
 
 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）; //每5秒调用一次。 
} 
  
 
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);



}  

解决方案
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.
  }


                        
这篇关于onclick infowindow的Google地图在刷新周期后消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！