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

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

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

我目前拥有的：

我所期望的是：

---

因为我已经看到了一些关于抵消地图上叠加元素后面出现的东西的问题，我想我应该给它一点时间

我是这样做的：

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));
}

在开始偏移过程之前，在地图上绘制路线并侦听map

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));
}

这是演示：

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));
}

我相信它仍然可以优化，但它做得相当好。如果您发现任何问题，请在此报告

编辑：

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));
}

同样的技术也适用于标记：

---

这不是一项容易的任务。你应该看看这些方法和步骤。可以计算某个点是否位于覆盖层下方。这一切都是关于在地图完成加载后，在绘制路线后进行计算。这可能很棘手。祝你好运。看看这个答案。这可能会对你有所帮助：也许在这里：