Question

我正在使用Google Geocoding API构建地图，该地图将标记放置在要求的任何位置。目前，它会分别自动缩放到每个位置-如何使用fit Bounds使其缩放到所有位置，即如果先输入了Sydney，然后输入了伦敦，那么我如何要求它自动缩放以便用户可以查看两者？

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

我尝试了许多不同的方法来使用范围，适合边界，marker.length等，但是对我来说都不起作用或没有任何意义。

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

每次单击“地理编码”时，首先需要将所有标记/位置存储在数组中，然后针对搜索到的每个包含给定点的位置调用 bounds.extend() ，最后调用 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 Geocoding API自动缩放以查看多个标记？

1 个答案: