javascript - Google Maps Api v3 - map.panTo 导致 "too much recursion"

Question

我在完成我的脚本时遇到问题，它可以使用 map.setCenter 在每个标记上重新定位，但我想平移到每个新标记。但是，当我使用 panTo 函数时，标记不会出现，尽管 map 确实显示并平移到每个新标记所在的位置。 Firebug 也给我一个“太多的递归”错误。谁能帮忙？

<script type="text/javascript">

    var map = {};
    var mapOptions;
    var infowindow;
    var marker;
    var lat, lng;
    var latlng;
    var gender;
    var content;
    var i;
    var infos = [];

    $(document).ready(function() {
        initialize();
    });

    function initialize() {

      latlng = new google.maps.LatLng(lat, lng);

      mapOptions = {
        zoom: 7,
        center: latlng,
      }

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      readJSONData();
    }

    function readJSONData()
    {

        var url = "events.json";
        var data;

        $.ajax({
            async: false,
            cache: false,
            type: "GET",
            dataType: "json",
            url: url,
            success: function(data) {

                i = Math.floor(Math.random() * data.events.length);

                if(data.events[i].gender == "Male") {
                    gender = 'male.png';
                } 
                if(data.events[i].gender == "Female"){
                    gender = 'female.png';
                }

                lat = data.events[i].lat;
                lng = data.events[i].lng;
                latlng = new google.maps.LatLng(lat, lng);

                content =
                '<div class="noscrollbar">'+
                '<div id="content">'+
                  '<div class="inner">'+

                    '<div class="inner-left">'+
                        '<span class="span-padding"><i class="fa fa-map-marker fa-lg"></i></span><br />'+
                        '<span class="span-padding"><i class="fa fa-mobile fa-lg"></i></span><br />'+
                        '<span class="span-padding"><i class="fa fa-music fa-lg"></i></span><br />'+
                        '<span class="span-padding"><i class="fa fa-clock-o fa-lg"></i></span><br />'+
                    '</div>'+

                    '<div class="inner-right">'+
                        '<span class="span-padding">'+data.events[i].lat+', '+data.events[i].lng+'</span><br />'+
                        '<span class="span-padding">'+data.events[i].network+'</span><br />'+
                        '<span class="span-padding">'+data.events[i].tone+'</span><br />'+
                        '<span class="span-padding">'+data.events[i].datetime+'</span><br />'+
                    '</div>'+

                  '</div>'+
                '</div>'+
                '</div>';

                marker = new google.maps.Marker({
                      position: latlng,
                      map: map,
                      icon: gender
                  });

                infowindow = new google.maps.InfoWindow();

                map.panTo(marker.getPosition())

                google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 
                    return function() {

                        /* close the previous info-window */
                       closeInfos();

                       infowindow.setContent(content);
                       infowindow.open(map,marker);


                        /* keep the handle, in order to close it on next click event */
                        infos[0]=infowindow;

                    };
                })(marker,content,infowindow));

                google.maps.event.addListener(marker,'mouseout', (function(marker,content,infowindow){ 
                    return function() {

                       closeInfos();

                    };
                })(marker,content,infowindow));



                function closeInfos(){

                   if(infos.length > 0){

                      /* detach the info-window from the marker ... undocumented in the API docs */
                      infos[0].set("marker", null);

                      /* and close it */
                      infos[0].close();

                      /* blank the array */
                      infos.length = 0;
                   }
                }
            }
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);

    window.setInterval(function(){
      readJSONData();
    }, 5000);

</script>

Answer 1

这个问题的一个原因是 initialize() 方法开始时 undefined variable lat 和 lng:

function initialize() {

    latlng = new google.maps.LatLng(lat, lng);

    mapOptions = {
    ...

lat 和 lng 必须定义为某些值。例如:

function initialize() {
    lat = 47.89;
    lng = 13.45;

    latlng = new google.maps.LatLng(lat, lng);
    ...

另一个问题是在代码的末尾有一个调用:

google.maps.event.addDomListener(window, 'load', initialize);

应该注释掉。