Question

我有以下代码，使用地理编码API将国家/地区标记放在Google地图上。

这很好，但是当我点击标记时，我现在想放大那个国家的界限，但我完全被卡住了！

有什么想法吗？

使用Javascript：

var country = [];
var bounds;
var geocoder;
var marker;

$(document).ready(function () {
    $("select[id*='countryList']").find("option").each(function () {
        country.push([$(this).val(), $(this).text()]);
    });
    initialize();
});

function getCountry(country, countryTotal, theMap) {
    geocoder.geocode( { 'address': country }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: theMap,
                title: ""+results[0].geometry.viewport,
                position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng())
            });
            marker.setIcon('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+countryTotal+'|B22222|FFFFFF') ;
            google.maps.event.addDomListener(marker, 'click', function () {
                // Zoom into the bounds of the country that has been clicked on...
            });

            bounds.extend(new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()));
            theMap.fitBounds(bounds);

        } else if(status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            setTimeout(function() {
                getCountry(country, countryTotal, theMap)
            }, 10);
        }
    });
}

function initialize() {
    bounds = new google.maps.LatLngBounds();
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        scrollwheel: false,
    }
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    for (var i = 0; i < country.length; i++) {
        var countries = country[i];
        getCountry(countries[1], countries[0], map);
    }
}

HTML：

<select name="countryList" id="countryList">
        <option value="1">Austria</option>
        <option value="1">Balearic Islands</option>
        <option value="2">Canary Islands</option>
        <option value="3">France</option>
        <option value="2">Italy</option>
        <option value="1">Madeira</option>
        <option value="1">Portugal</option>
        <option value="3">Spain</option>
        <option value="1">Turkey</option>
        <option value="18">UK</option>
</select>

<div id="map" style="width: 968px; height: 750px;"></div>

Answer 1

geocoder-result还返回包含边界的地址的几何。使用bounds作为地图fitBounds - 方法的参数：

google.maps.event.addDomListener(marker, 'click', function () {
   this.getMap().fitBounds(results[0].geometry.bounds)
});

谷歌地图API - 地理编码国家然后点击缩放到国家/地区的边界

1 个答案: