如何使用 Google 地理编码 API 自动缩放以查看多个标记？

Question

我正在使用 Google 地理编码 API 构建地图，将标记放在任何请求的位置。目前它单独自动缩放到每个位置 - 我如何使用 fit Bounds 使其缩放到所有位置，即如果先输入悉尼，然后输入伦敦，我如何让它自动缩放以便用户可以查看两者？

我对此很陌生，欢迎提出任何建议！

我尝试了很多不同的方式来使用边界、拟合边界、marker.length 等，但 none 对我来说很有效或很有意义。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 45.1497, lng: 100.0943},
        zoom: 3
    });

    var geocoder = new google.maps.Geocoder()

    var step1 = location.href.split("?")[1].split("=")[1]
    $("#address1").val(step1);
    geocodeAddress1(geocoder, map);

    $(".steps").keypress(function() {
        if (event.which == 13) {
            geocodeAddress(geocoder, map);
        }
    })
};

var labelIndex = 0;

function geocodeAddress1(geocoder, resultsMap) {
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    var address = $("#address1").val();
        geocoder.geocode({'address': address}, function(results, status) {
        if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                label: labels[labelIndex++ % labels.length],
                position: results[0].geometry.location
            });
        } else {
            alert('Search not successful: ' + status);
            }
        })
};

function geocodeAddress(geocoder, resultsMap) {
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var nextstep = "#".concat(event.target.id);
    debugger;
    var address = $(nextstep).val();
        geocoder.geocode({'address': address}, function(results, status) {
        if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                label: labels[labelIndex++ % labels.length],
                position: results[0].geometry.location
            });
        } else {
            alert('Search not successful: ' + status);
            }
        })
};

Answer 1

每次点击"Geocode"需要先将所有markers/loations存入一个数组，然后调用bounds.extend() for each location searched to contain the given point and lastly call resultsMap.fitBounds()设置包含给定边界的视口。

var marker = new google.maps.Marker({
    map: resultsMap,
    position: results[0].geometry.location
});

markerCount++;
markers[markerCount] = marker;

// extend the bounds here to consider each location
bounds.extend(results[0].geometry.location);
// then call fitBounts()
resultsMap.fitBounds(bounds);

这是一个工作 sample in JSFiddle.

希望对您有所帮助！

如何使用 Google 地理编码 API 自动缩放以查看多个标记？

How do I auto zoom to view multiple markers using the Google Geocoding API?

geocoding

google-maps-api-3

google-geocoding-api