Google Maps缩放到特定标记

Question

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

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

<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

Answer 2

要将地图放在第三个标记的中心，您可以执行以下操作：

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

工作小提琴

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

Answer 3

您可以尝试这样的事情：

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