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

Question

a)首先是真正的笑话:多年来购买微软的东西终于得到了返回..尝试使用 Chrome 进行调试时，我的 map 只显示一个标记。它在 setTimeout 期间处于正确的 latlng，闪烁一小部分秒，回到相同位置。在某个时间，错误地将代码发送到资源管理器......瞧......代码遍历数据库，但不为每个标记使用setTimeout。在 Explorer 中，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

这里是 fiddle (感谢帮助达到这一点)AJAX 之前的代码。我试图在 fiddle 中添加 json 文件，但是在 fiddle 中添加 json 太复杂了。

再次感谢您的宝贵时间。

Answer 1

由于您在 fiddle 中的方法运行良好，因此您不需要对
进行太多修改通过ajax实现。

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

$.getJSON 的成功回调:

function(json){

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

}

其余代码可能保持原样。

使用 ajax 请求的工作 fiddle :http://jsfiddle.net/doktormolle/CVECG/

(注意:在 fiddle 中我使用了 $.post() 因为 jsfiddle 需要 JSON 的后请求，你可以在你的应用程序中使用 $.getJSON )