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>

截至目前代码所做的是指示特定地址的指针，但我想做一些像我想在地图中自动居中的东西，可以看到所有的指针，但我似乎无法找出解决方案关于＆＃34;中心＆＃34;或者如何做到这一点，以便它自动居中以查看所有指针。

感谢。

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);
        });
    }

});

工作代码段：

＆＃13;

$(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);
        });
    }

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

谷歌地图地理编码longlat

1 个答案: