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

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

将您的标记推送到全局数组（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);
}

以第三个标记为中心（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数组都是全局变量。

Answer 3

您可以尝试这样的事情：

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

Google地图缩放到特定标记

3 个答案: