Question

我正在尝试将解决方案推广到此网址上的Google地图自动中心/自动调整问题：

Google maps auto-fit (auto center & autozoom) doesn't work

基本上，上述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>

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

谢谢！

皮特

谢谢Dr.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>

皮特

无法使谷歌地图自动调整和自动中心正常工作

0 个答案: