jquery - 谷歌地图地理编码 longlat

Question

我有这个代码

风格

<style>
#map_canvas {
    width:100%;
    height:100%;
}
</style>

JQUERY

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<script>

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
      ['4355 Ashford Dunwoody Road NE, Atlanta, GA 30346, US'],
      ['313 North Highland Ave NE, Atlanta, GA 30307'],
      ['1989 Cheshire Bridge Road, Atlanta, GA 30324, US'],
      ['1210 Howell Mill Rd NW, Atlanta, GA 30318, US']
    ];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });

        });
    }

});
</script>

HTML

<div id="map_canvas"></div>

截至目前，代码所做的是提供具有特定地址的指针，但我想做一些事情，比如我想在 map 中自动居中，这样可以看到所有指针，但我似乎无法找出解决方案关于“中心”或如何做到这一点，以便它会自动居中以查看所有指针。

谢谢。

Answer 1

使用google.maps.LatLngBounds .将所有标记位置添加到其中，然后调用 google.maps.Map.fitBounds关于结果。

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
        ['4355 Ashford Dunwoody Road NE, Atlanta, GA 30346, US'],
        ['313 North Highland Ave NE, Atlanta, GA 30307'],
        ['1989 Cheshire Bridge Road, Atlanta, GA 30324, US'],
        ['1210 Howell Mill Rd NW, Atlanta, GA 30318, US']
    ];
    var bounds = new google.maps.LatLngBounds();
    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            bounds.extend(latlng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });
            map.fitBounds(bounds);
        });
    }

});

工作代码片段:

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
        ['4355 Ashford Dunwoody Road NE, Atlanta, GA 30346, US'],
        ['313 North Highland Ave NE, Atlanta, GA 30307'],
        ['1989 Cheshire Bridge Road, Atlanta, GA 30324, US'],
        ['1210 Howell Mill Rd NW, Atlanta, GA 30318, US']
    ];
    var bounds = new google.maps.LatLngBounds();
    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            bounds.extend(latlng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });
            map.fitBounds(bounds);
        });
    }

});

html, body, #map_canvas {
    width:100%;
    height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas"></div>