使用填充在Google Map Api中的兩點之間顯示方向

我想使用谷歌Map Api並在兩點之間繪製方向。我的地圖部分覆蓋了灰色框，其中可能會顯示一些文字。當兩個點的距離太遠而灰色框覆蓋一個點時會出現問題。使用填充在Google Map Api中的兩點之間顯示方向

我該如何強制它以灰色方塊的右側顯示整個路徑的方式繪製路徑，而且沒有任何點與灰色方塊重疊？

我目前有：

enter image description here

我期待什麼：

enter image description here

2014-09-23 Hamid Ghorashi

不是一件容易的事。你應該看看['getProjection（）']（https://developers.google.com/maps/documentation/javascript/reference#Map）和['fromLatLngToPoint（）']（https：//開發者。 google.com/maps/documentation/javascript/reference#Projection）方法。您可以計算一個點是否低於疊加層。在地圖完成加載之後，繪製路線後，所有這些工作都將進行計算。這可能會很棘手。祝你好運。 – MrUpsidown 2014-09-25 06:56:10

看看這個答案。它可能會幫助你：http://stackoverflow.com/a/2692617/1238965 – MrUpsidown 2014-09-25 06:59:56

也許這裏也是：http://stackoverflow.com/a/4850765/1238965 – MrUpsidown 2014-09-25 07:12:59

因爲我已經看到了這麼幾個問題，您來抵消會出現元素背後的東西覆蓋在地圖，我想我會給它一點時間。

這是我如何做的：

在地圖上繪製的路線，並與膠印過程開始之前監聽地圖idle事件。
檢查路線邊界的最左邊的點，看它是否落在覆蓋層後面。這使用fromLatLngToPoint()方法將lat/lng座標轉換爲地圖投影上的一個點。
通過比較路線的最左邊和最右邊的點與地圖上的可用空間，檢查您可以抵消多少路線。偏移地圖，直到兩個點都適合地圖畫布。
如果兩個點不能放在地圖畫布內，請縮小並再次啓動相同的過程。
該腳本必須知道覆蓋層的寬度，並且應該應用一些邊距，以使其始終適合。

這裏是用來座標點之間進行轉換的功能：

function fromLatLngToPoint(latLng) { 

    var scale = Math.pow(2, map.getZoom()); 
    var nw = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng()); 
    var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw); 
    var worldCoordinate = map.getProjection().fromLatLngToPoint(latLng); 

    return new google.maps.Point(Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)); 
}

這裏是演示：

JSFiddle demo

我相信它仍然可以優化，但它做得很好。如果您發現任何問題，請在這裏舉報問題

編輯：

同樣的技術與標記工作過：

JSFiddle demo

來源

2014-10-04 11:39:28 MrUpsidown

使用填充在Google Map Api中的兩點之間顯示方向

回答

相關問題