Google 地图缩放至特定标记

Question

我正在制作我的第一个谷歌地图，地图的目的是显示一个城市中的各种标记，但地图应该放大到我在代码中设置的标记。

到目前为止，我已经一切正常，但我无法弄清楚如何缩放到特定标记，在地图居中并适合所有标记的那一刻。下面是我的代码：

<script>
    jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [
        ['Elements ll at McConachie, Edmonton', 53.634976,-113.426110],
        ['Creekwood Landing, Edmonton', 53.399758,-113.280340],
        ['Heritage Valley Station, Edmonton', 53.403244,-113.538686],
        ['Walker Lake Gate, Edmonton', 53.420672,-113.421288],
        ['Rutherford Landing, Edmonton', 53.409733,-113.533793],
        ['Vita Estates, Edmonton', 53.644733,-113.462985],
        ['Mactaggart Ridge Gate, Edmonton', 53.433462,-113.571319]
    ];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<img src="/map/images/elements-logo.png" alt="Elements ll at McConachie" />' +
        '<p><strong>Presentation Centre</strong><br/> 1060 McConachie Drive NW<br/><a href="#" target="_blank">Directions</a></p>' +        '</div>'],
        ['<div class="info_content">' +
        '<img src="/map/images/creekwood-logo.png" alt="Creekwood Landing" />' +
        '<p><strong>Presentation Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/heritage-logo.png" alt="Heritage Valley Station" />' +
        '<p><strong>Presentation Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/walkerlake-logo.png" alt="WalkerLake Gate" />' +
        '<p><strong>Presentation Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/rutherford-logo.png" alt="Rutherford Landing" />' +
        '<p><strong>Presentation Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/vita-logo.png" alt="Vita Estates" />' +
        '<p><strong>Presentation Centre</strong><br/>1060 McConachie Drive NW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/mactarggart--logo.png" alt="Mactaggart Ridge Gate" />' +
        '<p><strong>Sales Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        var iconBase = 'images/';
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: iconBase + 'carlisle_icon.png'
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(10);
        google.maps.event.removeListener(boundsListener);
    });

}
    </script>

Answer 1

设置正确的缩放并传递标记位置，如下所示

map.setZoom(17);
map.panTo(currentmarker.position);

更多详细信息可在此处找到放大标记 google.maps