本文介绍了在Google Map Api中的两个点之间用填充符显示方向的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我如何强制它以一种方式绘制路径,使整个路径显示在灰色框的右侧,并且没有一个点与灰盒子?



我目前有什么:



我期望的是:

解决方案

由于我看到关于抵消在地图上覆盖的元素后面的东西的几个问题,我想我会给它一些时间。

以下是我的工作方式:


  1. 地图并在开始偏移过程之前监听地图空闲事件。

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


  3. 通过将路线的最左边和最右边的点与地图上的可用空间进行比较,检查您可以抵消多少路线。如果两个点都不能放在地图画布内,则缩小并再次启动相同的过程。

  4. / p>
  5. 脚本必须知道叠加层的宽度,并且应该应用一些边距,以使其始终适合。

  6. b $ b

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

 函数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); ((worldCoordinate.x - worldCoordinateNW.x)* scale),Math.floor((worldCoordinate.y - worldCoordinateNW.y)* scale))

返回新的google.maps.Point(Math.floor ;
}

以下是演示:





我相信它仍然可以进行优化,但它的工作相当出色。如果您发现任何问题,请在此处举报。

编辑:

技巧也适用于标记:


I want to use google Map Api and draw direction between two points. My map is partially covered by a gray box in which some text might be shown. The problem is occurred when distance of the two points is too far and one point is covered by the gray box.

How can I force it to draw the path in a way that whole the path is is shown on the right side of the gray box and none of the points is overlapped by the gray box?

What I currently have:

What I expect:

解决方案

Since I saw already a few questions on SO about offsetting stuff that would appear behind elements overlaid on the map, I thought I'd give it a bit of time.

Here is how I did it:

  1. Plot a route on the map and listen for the map idle event before starting with the offset process.

  2. Check the leftmost point of the route bounds to see if it falls behind the overlay. This makes use of the fromLatLngToPoint() method to translate from lat/lng coordinates to a point on the map projection.

  3. Check how much you can offset the route by comparing the leftmost and rightmost points of the route with the available space on the map. Offset the map until both points fit on the map canvas.

  4. If both points cannot fit within the map canvas, zoom out and start the same process again.

  5. The script must be aware of the width of the overlay and you should apply some margins so that it always fits well.

Here is the function used to translate between coordinates and point:

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

Here is the demo:

I am sure it can still be optimized but it does the job quite well. Please report issues here if you find any.

Edit:

The same technique works with markers too:

这篇关于在Google Map Api中的两个点之间用填充符显示方向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 16:28
查看更多