使用填充在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