Javascript 无法使google maps autofit和autocenter正常工作

我正在尝试将此解决方案推广到以下URL中发现的google mapping auto center/auto fit问题：

基本上，在上面的URL中找到的解决方案是有效的。但是，我尝试使用$.getJSON对其进行泛化，以执行LINQ查询，该查询返回要映射的坐标的纬度和经度。所以基本上，我要做的是执行一个LINQ查询，返回要映射的坐标，然后将映射扩展或自动适配到包含所有映射坐标的视图。由于某种原因，我不能很好地让这个工作

以下是我到目前为止的情况：

 <script type="text/javascript">
    var map;
    var markersArray = [];
    var image = 'img/';
    var bounds = new google.maps.LatLngBounds();
    var loc;
    var Lat;
    var Lon;

    function init() {
        var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        /*loc = new google.maps.LatLng("43.616667", "-116.200000");
        bounds.extend(loc);
        addMarker(loc, 'Event A', "active");

        loc = new google.maps.LatLng("43.574722", "-116.563611");
        bounds.extend(loc);
        addMarker(loc, 'Event B', "active");*/


        var points = [];
        $.getJSON('@Url.Action("GetLocations","CompleteDisplay")', { isbn: @Model.ISBNNumber  }, function (data) 
        {
            $.each(data, function(index, element) 
            {
                Lat = element.Latitude;                        
                Lon = element.Longitude;

                points.push(new google.maps.LatLng(Lat, Lon));
            })
        })

        for (var i = 0; i < points.length; i++)
        {

                loc = points[i];
                bounds.extend(loc);
                addMarker(loc, 'Event A', "active");

        }

        map.fitBounds(bounds);
        map.panToBounds(bounds);


    }

    function addMarker(location, name, active) {
        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title: name,
            status: active
        });
    }

    $(document).ready(function () {
        $('#tabs').tabs();
        $('#tab2').bind('click', function () {
            init();
        });

    });

</script>

上述操作的结果是，它在错误的位置绘制了没有任何标记的地图。有人能指出我做错了什么吗

谢谢

皮特

谢谢Molle博士。我能把所有东西都放在正确的地方，现在一切都正常了。以下是最终结果：

<script type="text/javascript">

    $(document).ready(function () 
    {
        var points = [];
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var loc;

        $('#tabs').tabs();
        $('#tab2').bind('click', function () 
        {
            $.getJSON('@Url.Action("GetLocations","CompleteDisplay")', { isbn: @Model.ISBNNumber  }, function (data) 
            {
                $.each(data, function(index, element) 
                {
                    Lat = element.Latitude;                        
                    Lon = element.Longitude;
                    points.push(new google.maps.LatLng(Lat, Lon));
                });

                for (var i = 0; i < points.length; i++)
                {
                    loc = points[i];
                    bounds.extend(loc);
                    addMarker(loc, 'Event A', "active");
                }

                function addMarker(location, name, active) {
                    var marker = new google.maps.Marker({
                        position: location,
                        map: map,
                        title: name,
                        status: active
                    });
                }

                google.maps.event.trigger(map, 'resize');

                map.fitBounds(bounds);
                map.panToBounds(bounds);

            });
        });
    })
</script>

---

Pete

美元.getJSON的回调是异步运行的，您必须在回调中创建标记，也可以在那里调用fitBounds/panToBounds+1，以便后续编辑您的答案。