Question

最初我们输入了缩放和坐标。现在我们希望自动缩放和自动中心。使用bounds.extend()尝试了map.fitBounds(); map.panToBounds();，似乎无法使其正确缩放和居中。原始代码如下。非常感谢任何帮助。

<script>
var mapfunction = function() {

    $this = $("#map_canvas");
    $zoom_level = ($this.data("gmap-zoom") || 5);
    $data_lat = ($this.data("gmap-lat") || 29.895883);
    $data_lng = ($this.data("gmap-lng") || -80.650635);
    $xml_src = ($this.data("gmap-src") || "xml/gmap/pins.xml");


    nvisionhstyleMap = new google.maps.StyledMapType(nightvision_highlight_style, {
        name: "Nightvision"
    });

    function xmlLoadMap() {

        var centerLatLng = new google.maps.LatLng($data_lat, $data_lng),
        mapOptions = {
            zoom: $zoom_level,
            center: centerLatLng,
            //disableDefaultUI: true,
            //mapTypeId : google.maps.MapTypeId.ROADMAP
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'nightvision_highlight_style'
                ]
            }
        },

        bounds = new google.maps.LatLngBounds(),
        infowindow = new google.maps.InfoWindow(),
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        map.mapTypes.set('nightvision_highlight_style', nvisionhstyleMap);

        map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    //    map.setMapTypeId('metro_style');

            $.get($xml_src, function(data) {

                // create the Bounds object
                var bounds = new google.maps.LatLngBounds();

                $(data).find("marker").each(function(){

                    var eachMarker = jQuery(this),
                        // grab the address from XML
                        theAddress = eachMarker.find("address").text(),
                        mygc = new google.maps.Geocoder(theAddress);

                        mygc.geocode({'address' : theAddress}, function(results, status) {

                            var mLat = results[0].geometry.location.lat(),
                                Long = results[0].geometry.location.lng(),

                                marker = new google.maps.Marker({
                                position : new google.maps.LatLng(mLat, Long),
                                map : map,
                                icon : ('img/' + eachMarker.find("icons").text() + '.png'),
                                scrollwheel : false,
                                streetViewControl : true,
                                title : eachMarker.find("name").text()
                        }),

                        link = "link";

                        google.maps.event.addListener(marker, 'click', function() {// click
                            // Setting the content of the InfoWindow
                            var contentString = '<div id="info-map" style="width:300px; height:85px; padding:0px;"><div>' + '<div style="display:inline-block; width:86px; verticle-align:top; float:left;"><img src=' + eachMarker.find("image").text() + ' class="thumbnail" style="width:80%; verticle-align:top;" /></div>' + '<div style="display:inline-block; width:200px; float:left;"><h4>' + eachMarker.find("name").text() + '</h4><b>' + eachMarker.find("address").text() + '</b><br/>' + '<p><a href="' + eachMarker.find("link").text() + '" class="btn btn-xs btn-default pull-right"><i class="fa fa-fw fa-map-marker"></i>More Info</a></p>' + '</div></div></div>';
                            infowindow.setContent(contentString);
                            infowindow.open(map, marker);

                            google.maps.event.addListener(map, 'click', function() {
                                infowindow.close()
                                })
                            });

                        });// end geocode

                });// end find marker loop

        }); // end get data


    } // end xmlLoadMap

    // grey




    xmlLoadMap();

};


// end pagefunction

// run pagefunction on load

$(window).unbind('gMapsLoaded');
$(window).bind('gMapsLoaded', mapfunction);
window.loadGoogleMaps();

这是我们尝试使用`bound.extend'。它从默认值更改，但以0,0而不是标记为中心。

<script>
var mapfunction = function() {




    $this = $("#map_canvas");
    $zoom_level = ($this.data("gmap-zoom") || 5);
    $data_lat = ($this.data("gmap-lat") || 29.895883);
    $data_lng = ($this.data("gmap-lng") || -80.650635);
    $xml_src = ($this.data("gmap-src") || "xml/gmap/pins.xml");


    nvisionhstyleMap = new google.maps.StyledMapType(nightvision_highlight_style, {
        name: "Nightvision"
    });

    function xmlLoadMap() {

        var centerLatLng = new google.maps.LatLng($data_lat, $data_lng),
        mapOptions = {
            zoom: $zoom_level,
            center: centerLatLng,
            //disableDefaultUI: true,
            //mapTypeId : google.maps.MapTypeId.ROADMAP
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'nightvision_highlight_style'
                ]
            }
        },

        bounds = new google.maps.LatLngBounds(),
        infowindow = new google.maps.InfoWindow(),
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        map.mapTypes.set('nightvision_highlight_style', nvisionhstyleMap);

        map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    //    map.setMapTypeId('metro_style');

            $.get($xml_src, function(data) {

                // create the Bounds object
                var bounds = new google.maps.LatLngBounds();

                $(data).find("marker").each(function(){

                    var eachMarker = jQuery(this),
                        // grab the address from XML
                        theAddress = eachMarker.find("address").text(),
                        mygc = new google.maps.Geocoder(theAddress);

                        mygc.geocode({'address' : theAddress}, function(results, status) {

                            var mLat = results[0].geometry.location.lat(),
                                Long = results[0].geometry.location.lng(),

                                marker = new google.maps.Marker({
                                position : new google.maps.LatLng(mLat, Long),
                                map : map,
                                icon : ('img/' + eachMarker.find("icons").text() + '.png'),
                                scrollwheel : false,
                                streetViewControl : true,
                                title : eachMarker.find("name").text()
                        }),

                        link = "link";
                        bounds.extend(new google.maps.LatLng(mLat, Long));  

                        google.maps.event.addListener(marker, 'click', function() {// click
                            // Setting the content of the InfoWindow
                            var contentString = '<div id="info-map" style="width:300px; height:85px; padding:0px;"><div>' + '<div style="display:inline-block; width:86px; verticle-align:top; float:left;"><img src=' + eachMarker.find("image").text() + ' class="thumbnail" style="width:80%; verticle-align:top;" /></div>' + '<div style="display:inline-block; width:200px; float:left;"><h4>' + eachMarker.find("name").text() + '</h4><b>' + eachMarker.find("address").text() + '</b><br/>' + '<p><a href="' + eachMarker.find("link").text() + '" class="btn btn-xs btn-default pull-right"><i class="fa fa-fw fa-map-marker"></i>More Info</a></p>' + '</div></div></div>';
                            infowindow.setContent(contentString);
                            infowindow.open(map, marker);

                            google.maps.event.addListener(map, 'click', function() {
                                infowindow.close()
                                })
                            });

                        });// end geocode

                });// end find marker loop

        }); // end get data

        map.fitBounds(bounds);
        map.panToBounds(bounds);
    } // end xmlLoadMap

    // grey

    xmlLoadMap();

};


// end pagefunction

// run pagefunction on load

$(window).unbind('gMapsLoaded');
$(window).bind('gMapsLoaded', mapfunction);
window.loadGoogleMaps();

Answer 1

知道了！在地理编码结束之前需要调用map.fitBounds()。已将address_count++添加到地理编码，并在最后一个标记上调用map.fitBounds()。

                    if(address_count == $(data).find("marker").length) {    
                        map.fitBounds(bounds);
                        map.panToBounds(bounds); 
                    }
                });// end geocode

            });// end find marker loop

        }); // end get data

    } // end xmlLoadMap

   xmlLoadMap();
};

Google地图自动缩放和自动中心

1 个答案: