谷歌地图 v3 -> 数据库/mysql -> AJAX -> 循环 -> AJAX -> 循环

Question

a) 首先是真正的笑话： 多年来购买微软的东西终于得到了回报。 尝试使用 Chrome 进行调试时，我的地图只显示了一个标记。它在 setTimeout 期间处于正确的纬度上，闪烁一小段时间，回到相同的位置。 在某个时间，错误地将代码发送到资源管理器............瞧......代码遍历数据库，但不使用每个标记的 setTimeout。在资源管理器中，setTime out（例如，5 秒）意味着所有标记都会显示，并带有正确的信息窗口，但所有标记都是 5 秒。时间越长，它会在其中一个中停留的时间越长（总是相同的），在其他标记上运行得非常快。在 chrome 中，迭代是如此之快，我无法通过其他 latlng 看到迭代。只是眨眼。

b) 我猜问题是 getJson（或 Ajax），使用 for 循环或 $.each（我使用了各种组合.....）与函数 changeMarker 内的另一个循环结合。所以有两个循环同时进行。但是，我不知道如何解决它。如果我在 $.each 或 for 循环之后立即关闭 Ajax（或 getJson），则其余代码将无法获取值。什么都没有发生（只是我的警报，用于调试目的）。

不，我不完全了解闭包。是的，我读了一堆东西，主要的是here，还有here 和here 和there。但还是没弄明白：/

c) 作为一个新手，想解决一个问题好几天……却没有得到解决，这并不容易。

任何帮助将不胜感激！

这是代码 - 省略了 map 获取个人选项的长部分。

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


function initialize() {

    //personal options not included here. 

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

    map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

    $.getJSON('php/locationsJson.php',function(json){
        $.each( json, function(i, item) {
            var lat = this.lat;
            var lng = this.lng;

            var location  = new google.maps.LatLng(json[i].lat,json[i].lng);                    

            alert( json[i].lat +','+json[i].lng );

            function dropMarker (map, pos){
                return new google.maps.Marker({
                    map: map,
                    position: location,
                    draggable: false,
                }); // return
            }

            function changeMarker() {   

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

                var pos = location[index];
                marker = dropMarker(map,pos);
                var contentString = ('lat: ' + location.lat() + '<br />' + 'lng: ' + location.lng())

                infoWindow.setContent(contentString);

                setTimeout(function () {
                    infoWindow.open(map, marker);
                }, 100);

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

                setTimeout(function () {
                    changeMarker();
                }, 4000);
            } 

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

            infoWindow = new google.maps.InfoWindow()

            changeMarker(); 
        }); //$.each                
    }); //end of getjson   
}  //end of initialized

这里是 AJAX 之前的代码fiddle（感谢您提供的帮助）。我尝试在小提琴中添加json文件，但是在小提琴中添加json太复杂了。

再次感谢您的宝贵时间。

Answer 1

由于您在小提琴中的方法效果很好，因此您不需要太多修改
通过ajax实现。

不要在循环内启动超时，而是使用循环来填充 NEIGBORHOODS 数组，并在循环调用 changeMarker()

$.getJSON 的成功回调：

function(json){

  NEIGBORHOODS=[];
  $.each(json,
         function(){
           NEIGBORHOODS.push(new google.maps.LatLng(this.lat,this.lng));
  });
  changeMarker();

}

其余代码可能会保持原样。

处理 ajax 请求：http://jsfiddle.net/doktormolle/CVECG/

（注意：在小提琴中我使用了$.post()，因为 jsfiddle 需要 JSON 的后请求，你可以在你的应用程序中使用$.getJSON）