google-maps - 使用填充显示 Google Map Api 中两点之间的方向

Question

我想使用 google Map Api 并在两点之间绘制方向。我的 map 部分被灰色框覆盖，其中可能会显示一些文本。当两点的距离太远并且一个点被灰色框覆盖时会出现问题。

如何强制它以整个路径显示在灰色框的右侧并且没有任何点与灰色框重叠的方式绘制路径？

我目前拥有的:



我的期望:

Answer 1

因为我已经在 SO 上看到了一些关于抵消会出现在 map 上覆盖元素后面的东西的问题，所以我想我会给它一点时间。

我是这样做的:

在 map 上绘制路线并收听 map idle在开始偏移过程之前的事件。

检查路线边界的最左边的点，看看它是否落在覆盖层后面。这利用了 fromLatLngToPoint()从 lat/lng 坐标转换到 map 投影上的点的方法。

通过将路线的最左边和最右边的点与 map 上的可用空间进行比较，检查可以偏移多少路线。偏移 map ，直到两个点都适合 map Canvas 。

如果两个点都不适合 map Canvas ，请缩小并重新开始相同的过程。

脚本必须知道覆盖层的宽度，并且您应该应用一些边距以使其始终适合。

这是用于在坐标和点之间转换的函数:

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