谷歌地圖V3自定義標記圖像和fitBounds（）

我想讓我的自定義標記顯示在我的地圖上後，我已經使用fitBounds（）方法來適應標記本身的地圖邊界。谷歌地圖V3自定義標記圖像和fitBounds（）

我已經通過遍歷標記數組來完成此操作，然後擴展映射的邊界以合併標記座標。

這適用於股票谷歌地圖標記。但是，我的客戶想要爲其網站使用相當大（36px x 57px）的標記圖像。如何在擬合地圖邊界時對此進行補償？

在使用自定義標記圖像的時刻，它們並不全都適合在邊界集內。

2012-05-20 RyanP13

便宜的答案是在fitBounds（）後總是縮小一個級別。但我們可以做得更好一點。

我喜歡寫黑客。在這裏我假設你的標記尺寸永遠不會大於36x57。我測試了一段時間，發現fitBounds()在邊緣和最接近的標記之間留下了大約42像素的邊緣（可能不在手機上），並且我還假設您沒有重新定位標記，也就是說，它始終是顯示在給定的座標位置上方。如果圖標跑到另一邊，則需要進行調整。

我的黑客利用了一個函數來測量LatLng的像素位置（使用容器版本，我在這裏讀到div版本對於邊界變化不可靠）。

由於我們知道圖標的高度以及最頂層標記的位置，因此如果確定要離屏，我們可以將地圖向南移動一點。如果下面沒有足夠的保證金，唯一的選擇是縮小。我唯一擔心的是它會因爲它需要兩個事件而發生抖動：fitBounds和自定義平移/縮放。唯一的答案就是重寫一個自定義的fitBounds。當我手動測試時，事件順利進行。

http://jsfiddle.net/sZJjY/

點擊添加圖標貓，單擊右鍵觸發調整大小/平移。

示例：放置3-4個小貓，右鍵單擊，然後故意放置另一個頂端，再次右鍵單擊。

function fitIcons() { 
    var left = 180.0; 
    var right = -180.0; 
    var top = -90.0; 
    var bottom = 90.0; 

    for (var i = 0; i < markers.length; i++) { 
     curlat = markers[i].getPosition().lat(); 
     curlng = markers[i].getPosition().lng(); 
     if(curlat > top) { top = curlat; } 
     if(curlat < bottom) { bottom = curlat; } 
     if(curlng > right) { right = curlng; } 
     if(curlng < left) { left = curlng; } 
    } 

    var overlay = new google.maps.OverlayView(); 
    overlay.draw = function() {}; 
    overlay.setMap(map); 

    map.fitBounds(new google.maps.LatLngBounds(
     new google.maps.LatLng(bottom, left), 
     new google.maps.LatLng(top, right))); 

    topPixels = overlay.getProjection().fromLatLngToContainerPixel(
        new google.maps.LatLng(top, right)); 

    bottomPixels = overlay.getProjection().fromLatLngToContainerPixel(
        new google.maps.LatLng(bottom, left)); 

    topGap = topPixels.y; 
    bottomGap = $("#map_canvas").height() - bottomPixels.y; 

    if(topGap < iconHeight) { 
     if(bottomGap > iconHeight) { 
     map.panBy(0, topGap); 
     } 
     else { 
     map.setZoom(map.getZoom() - 1); 
     } 
    } 
    }

來源

2012-05-20 19:49:18

由於您已經計算了邊界，因此您可能需要擴展邊界以添加足夠的緩衝區以包含大圖像。你可以用這種方法計算或擴展邊界的公式稱爲凸包; Computational Geometry Algorithms Library在2D Convex Hull Algorithms上有一個部分，或者有一個JavaScript Quickhull Article，其中還包括一個靠近頁面底部的漂亮的在線示例。希望這是有幫助的 -

來源

2012-05-20 19:07:17

谷歌地圖V3自定義標記圖像和fitBounds（）

回答

相關問題