谷歌地图 v3：Ajax -> 数据库 -> InfoWindow -> 错误

Posted 2023-02-23

【中文标题】谷歌地图 v3：Ajax -> 数据库 -> InfoWindow -> 错误

【英文标题】：Google maps v3: Ajax -> Database -> InfoWindow -> Error

【发布时间】：2013-07-04 13:47:51

【问题描述】：

我几乎明白了。差不多了。

在尝试将数据库中的数据 ajax 到 infowindows.... 几天后，现在所有标记都获得了正确的 infowindow... 除了数据库中的最后一个条目，它总是未定义。

这里是fiddle。

为什么我只在一个条目中得到未定义？看起来程序第一次加载时是空的，但在第一个循环之后，它仍然是未定义的，永远永远......

这里是代码，由于Ajax，它与fiddle略有不同。

任何建议将不胜感激。我已经做了几个月的电脑，只是为了让这个信息窗口（几乎）正确，我读了很多关于 ajax、闭包等的资料。我有一个模糊的想法，为什么我必须在函数 dropmarker (...box) 中创建那个参数/变量“框”，但它可以工作，我的意思是，它几乎可以工作。如果我不使用box.name，而是使用pos.lat ()，那么一切都很好。但我需要其他值，因为最终项目将是 Youtube 的链接。我需要能够带来所有的价值观。

var BERLIN = new google.maps.LatLng(-32.517683, -46.394393);
var map = null;
var marker = null;
var index = 0;
var infoWindow = [];
var MY_MAPTYPE_ID = 'custom_style';



function initialize() 

         var featureOpts = [ ]  // lots personal options deleted to shorten code
         var mapOptions =  // lots personal options deleted to shorten code
        map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);


         var styledMapOptions =  name: 'Custom Style'
         ;

        var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

        map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
        function dropMarker (map,box, pos )                                          return new google.maps.Marker(
                                map: map,
                                position: pos,
                                draggable: false,
                                ); // return

            //end of function
        


        function changeMarker()    

            if (marker) 
                infoWindow.close();
                marker.setMap(null);

            

            var pos = neighborhood[index];
            var box = infowindows[index];
            marker = dropMarker(map,box, pos );
            var contentString = ('lat:' + box.lat+ '<br />' + 'lng:' + box.lng  + '<br />' + 'link:' +  box.link + '<br />' +'name:' + box.name)
            infoWindow.setContent( contentString);


            setTimeout(function () 
                infoWindow.open(map, marker);
            , 200);

            index = (index + 1) % neighborhood.length;

            setTimeout(function () 
                changeMarker();
            , 3000);
     

            customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); // this seems to be optional
            infoWindow = new google.maps.InfoWindow ()  

                $.ajax(
                    type : 'POST',
                    url : 'php/locationsJson.php',
                    dataType : 'json',

                    success: function( json )
                            neighborhood=[];
                            infowindows =[];
                            $.each(json,function(i,item)
                                neighborhood.push(new google.maps.LatLng(this.lat,this.lng));
                                infowindows.push(infoWindow)
                                contentString = (link:this.link,name:this.name,lat:this.lat,lng:this.lng)
                                infoWindow = new google.maps.InfoWindow (contentString)     
                                alert ( infowindows)                    
                         );    //$.each

             changeMarker();    
                     // end of success
                );//end of ajax        
  //end of initialized

【参考方案1】：

您应该在设置其值后推送infoWindow。这是工作的JSFiddle

contentString = (

    lat: this.lat,
    lng: this.lng,
    name: this.name,
);
infoWindow = new google.maps.InfoWindow(contentString)
);
infowindows.push(infoWindow);