javascript - すべてのピンを動的に含めるためのマップの拡大/縮小

Question

ピンと各ピンの情報ウィンドウを表示するマップがあります。ズーム レベルは 9 で、そのズーム レベルでは一部のピンが表示されません。一度にマップ キャンバスにすべてのピンを表示するには、ズーム レベルを動的に制御する必要があります。

Answer 1

LatLngBoundsオブジェクトがあります。各マーカーを作成するときに、境界を拡張して各マーカーの位置を含めます。次に、最後にfitBoundsメソッドを呼び出して、すべてのマーカーに合うようにマップのサイズを変更します。

function initialize() {
        var arrPoints = [
            {
                lat: 51.498725,
                lng: -0.17312,
                description: "One",
                price: 1.11
            },
            {
                lat: 51.4754091676,
                lng: -0.186810493469,
                description: "Two",
                price: 2.22
            },
            {
                lat: 51.4996066187,
                lng: -0.113682746887,
                description: "Three",
                price: 3.33
            },
            {
                lat: 51.51531272,
                lng: -0.176296234131,
                description: "Four",
                price: 4.44
            }
        ];

        var centerLatLng = new google.maps.LatLng(51.532315,-0.1544);

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom:               15,
            center:             centerLatLng,
            mapTypeId:          google.maps.MapTypeId.ROADMAP
        });

        // create the Bounds object
        var bounds = new google.maps.LatLngBounds();

        var homeMarker = new google.maps.Marker({
            position: centerLatLng,
            map: map,
            icon: "http://maps.google.com/mapfiles/ms/micons/green-dot.png"
        });

        for (var i = 0; i < arrPoints.length; i++) {
            position = new google.maps.LatLng(arrPoints[i].lat, arrPoints[i].lng);

            var marker = new google.maps.Marker({
                position: position,
                map: map
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, this);
            });

            // extend the bounds to include this marker's position
            bounds.extend(position);
        }

        // make sure we include the original center point
        bounds.extend(centerLatLng);

        // resize the map
        map.fitBounds(bounds);
    }

Answer 2

この機能を使用しmap.fitBoundsて、特定の境界領域にズームできます。この領域を取得するには、すべてのピンをループして、座標の最小値/最大値を取得する必要があります。

恥のブログにはすでに最終的な解決策があります。