Google maps v3:Ajax - >数据库 - > InfoWindow - >错误

时间:2013-07-06 19:03:54

标签: javascript jquery ajax google-maps-api-3 javascript-events

我几乎得到了它。几乎。

在尝试将数据从数据库传输到infowindows之后的几天......,现在所有标记都获得了正确的信息...除了数据库中的最后一个条目,它总是未定义。

这是fiddle

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

这是代码,由于Ajax,它与小提琴略有不同。

任何建议都将不胜感激。我一直在做电脑几个月,只是为了让这个信息(几乎)正确,给了我很多关于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 个答案:

答案 0 :(得分:1)

您应在设置其值后按infoWindow。这是工作JSFiddle

contentString = ({

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