像Pinterest Map一樣的Google Maps v3（移動中心位置並更改標記區域）

Question

我想在Google Maps v3中獲得與Pinterest Map（例如www.pinterest.com/airbnb/loved-by-parisians/）相同的效果。

到目前為止，我已經來到這里： http : //jsfiddle.net/tdff3/9xEEG/

我缺少一件事：移動中心地圖位置並在右側更改標記的可見區域，以響應不同的分辨率。

現在：

我想要的是：

function initialize()
{
    var mapOptions =
    {
        zoom: 8,
        center: new google.maps.LatLng( -33.9, 151.2 ),
        disableDefaultUI: true,
        zoomControl: true,
        zoomControlOptions:
        {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        scrollwheel: false
    };

    var map = new google.maps.Map
    (
        document.getElementById( 'map-canvas' ),
        mapOptions
    );

    var beaches =
    [
        [ 'Bondi Beach', -33.890542, 151.274856, 4 ],
        [ 'Coogee Beach', -33.423036, 151.259052, 5 ],
        [ 'Cronulla Beach', -34.028249, 121.157507, 3 ],
        [ 'Manly Beach', -33.80010128657071, 151.28747820854187, 2 ],
        [ 'Maroubra Beach', -33.450198, 151.259302, 1 ]
    ];

    setMarkers( map, beaches );
}

function setMarkers( map, locations )
{
    var bounds = new google.maps.LatLngBounds();

    for( var i = 0; i < locations.length; i++ )
    {
        var beach = locations[ i ];
        var myLatLng = new google.maps.LatLng( beach[ 1 ], beach[ 2 ] );
        var marker = new google.maps.Marker(
        {
            position: myLatLng,
            map: map,
            title: beach[ 0 ],
            zIndex: beach[ 3 ]
        } );

        bounds.extend( myLatLng );
    }

    map.fitBounds( bounds );
}

function loadScript()
{
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
        'callback=initialize';
    document.body.appendChild( script );
}

window.onload = loadScript;

Answer 1

我認為這將是所有標記的擴展范圍的標記區域在您發布的2張圖片上並不相同。

如果您在澳大利亞各地都有標記，那么邊界看起來就像第二張圖片。 如果不是，但是您仍想獲得此特定視圖，則可能需要使用縮放級別以確保以這種方式顯示，或手動定義這些范圍。

關於向右移動地圖，您可以使用地圖panBy（）方法 ，該方法可讓您將地圖中心更改為給定距離（以像素為單位）。

希望這可以幫助！