谷歌地圖v3像Pinterest地圖（移動中心位置和更改標記區域）

我想通過Google地圖v3獲得與Pinterest地圖（例如www.pinterest.com/airbnb/loved-by-parisians/）相同的效果。谷歌地圖v3像Pinterest地圖（移動中心位置和更改標記區域）

到目前爲止，我已經來到了這個：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;

來源

2014-01-30 user3252384

對於你所問的問題感到困惑，你想移動地圖（將div覆蓋在頂部），並確保標記始終可見？ – Swires

是的。我想要在地圖右側的所有標記，並讓左側沒有任何標記，僅在頁面加載時，避免覆蓋div上的任何可見標記。此右側有一個動態寬度，具體取決於屏幕分辨率。 – user3252384

的標記區域，我相信會是所有標記擴展邊界是不在你張貼的2張照片上也是如此。

如果你在澳大利亞各地都有標記，那麼界限看起來就像你的第二張照片。如果不是，但您仍然希望實現此特定視圖，那麼您可能需要使用縮放級別來確保以這種方式顯示，或者手動定義這些界限。

關於地圖向右移動，您可以使用地圖panBy() method，它允許您以像素爲單位改變地圖的中心距離。

希望這會有所幫助！

來源

2014-01-30 11:01:14 MrUpsidown

感謝您的回答。我試試你的解決方案：http://jsfiddle.net/tdff3/9xEEG/11/ 但我也需要一個自動縮放變化，以避免正確的可見標記熄滅屏幕。有任何想法嗎？ – user3252384

您在您的問題中提到了*迴應*。如果文本框以所有屏幕分辨率保持在地圖上，我無法真正考慮如何使此「響應」。無論如何，將panBy（）設置爲固定值似乎與響應方法相矛盾。 – MrUpsidown

谷歌地圖v3像Pinterest地圖（移動中心位置和更改標記區域）

回答

相關問題