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

Question

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

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

我现在有什么：

我的期望：

Answer 1

由于我已经看到了一些关于抵消会在地图上覆盖的元素背后的东西的问题，我想我会给它一些时间。

我是这样做的：

1. 在开始使用偏移过程之前，在地图上绘制路线并侦听地图idle事件。

2. 检查路线边界的最左边点，看它是否落在叠加层后面。这使用fromLatLngToPoint()方法将lat / lng坐标转换为地图投影上的点。

3. 通过将路线的最左边和最右边的点与地图上的可用空间进行比较，检查路线偏移量。偏移地图，直到两个点都适合地图画布。

4. 如果两个点都无法放入地图画布中，请缩小并再次启动相同的过程。

5. 脚本必须知道叠加层的宽度，您应该应用一些边距，以便它始终适合。

以下是用于在坐标和点之间进行转换的函数：

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