谷歌地图缩放到特定标记

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);

更多细节可以在这里找到Zoom in to marker google.maps

Answer 2

你可以试试这样的：

map.setCenter(new google.maps.LatLng(53.634976, -113.426110));

Answer 3

要将地图以第三个标记为中心，您可以这样做：

1. 将您的标记推入全局数组 (gmarkers)：

   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' */
     });
     gmarkers.push(marker);
     // 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);
   }
   

2. 以第三个标记为中心（gmarkers[2]）：

   var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
     map.setZoom(15);
     map.setCenter(gmarkers[2].getPosition());
     google.maps.event.removeListener(boundsListener);
   });
   

working fiddle

注意： map 和 gmarkers 数组都是全局变量。