我想使用 google Map Api 并在两点之间绘制方向。我的 map 部分被灰色框覆盖,其中可能会显示一些文本。当两点的距离太远并且一个点被灰色框覆盖时会出现问题。
如何强制它以整个路径显示在灰色框的右侧并且没有任何点与灰色框重叠的方式绘制路径?
我目前拥有的:
我的期望:
最佳答案
因为我已经在 SO 上看到了一些关于抵消会出现在 map 上覆盖元素后面的东西的问题,所以我想我会给它一点时间。
以下是我的做法:
idle
事件。 fromLatLngToPoint()
方法将纬度/经度坐标转换为 map 投影上的一个点。 这是用于在坐标和点之间转换的函数:
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
关于google-maps - 使用填充显示 Google Map Api 中两点之间的方向,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25992521/