谷歌地图折线中间（质心？）答案

【问题标题】：google maps middle of a polyline (centroid?)谷歌地图折线中间（质心？）
【发布时间】：2011-10-19 09:00:55
【问题描述】：

我有一个折线列表，就像谷歌地图 does 当我点击折线时我希望在我点击的地方显示一个信息窗口，并且它与此功能配合得很好

function mapsInfoWindow(polyline, content) {
    google.maps.event.addListener(polyline, 'click', function(event) {            
        infowindow.content = content;
        infowindow.position = event.latLng;
        infowindow.open(map);
    });
}

当我点击列表时出现问题（使用相同的功能），event 显然没有 latLng，但我想要 infowindow无论如何都会显示在折线的中间，就像您单击谷歌地图链接I mentioned before中的列表时一样。

试过 LatLngBounds();但这给出了折线创建的区域的实际中心，而不是我需要的中间。

知道怎么做吗？

【问题讨论】：

我没有现成的解决方案，但线索如下：(rbrundritt.wordpress.com/2008/10/14/…) 如果您将解决方案发布为答案，我们将不胜感激。干杯。
真的主要想知道api本身是否可以帮助它..显然它没有。我会研究那个链接，谢谢。
gis.stackexchange.com/questions/2128/…更多线索
我认为它应该是折线中的某个中间点，而不是多边形的质心。不一样。
此外。我正在尝试为 gmaps v3 维护 extensions，您的 google.maps.Polyline.getMidPoint() 代码会很有用。如果你会编码，当然:)

标签： javascript google-maps google-maps-api-3 google-polyline

【解决方案1】：

所以这是（有点骇人听闻的）解决方案。

使用http://www.geocodezip.com/scripts/v3_epoly.js库，然后计算你折线的总长度（各种方式），将其分成两半并调用epoly的.GetPointsAtDistance()函数。

这应该返回 LatLng 点，但有时它的行为有点奇怪，返回两个点，甚至以某种方式“破坏”该点。所以你能做的最安全的事情可能是这样的：

var pointInHalf = polyline.GetPointsAtDistance(polylineLength);
var pointCoordinate = new google.maps.LatLng(pointInHalf[0].lat(), pointInHalf[0].lng());

好吧，总比没有好。

【讨论】：

【解决方案2】：

来自http://www.geocodezip.com/v3_polyline_example_geodesic_proj.html

没有扩展并假设折线是一条直线。

可以将 lat/lng 坐标转换为点平面 (x,y) 位置并计算两者之间的平均值。这将为您提供中心像素位置。然后，您可以将此位置转换回 latlng 以进行地图绘制。

var startLatLng = startMarker.getPosition(); 
var endLatLng = endMarker.getPosition(); 
var startPoint = projection.fromLatLngToPoint(startLatLng); 
var endPoint = projection.fromLatLngToPoint(endLatLng); 
// Average 
var midPoint = new google.maps.Point( 
    (startPoint.x + endPoint.x) / 2, 
    (startPoint.y + endPoint.y) / 2); 
// Unproject 
var midLatLng = projection.fromPointToLatLng(midPoint); 
var midMarker = createMarker(midLatLng, "text");

【讨论】：

然后试着更好地表达你的问题。
我刚刚给你的链接也在第一篇文章中；）在其他大部分文章中也指出它不是一条直线img62.imageshack.us/img62/2145/nonot.png
如果 {"geodesic": false} 这会起作用，当“geodesic”设置为 true 时，我们有办法找到折线的中点吗？

【解决方案3】：

所以首先你需要使用计算距离的几何库。将 library=geometry 添加到您的 JS 调用中，例如

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

假设您知道折线的起点和终点，您应该可以这样做：

var inBetween = google.maps.geometry.spherical.interpolate(startLatlng, endLatlng, 0.5);  
infowindow.position = inBetween;

我想如果你还不知道起点和终点，你可以从 polyline.getPath() 中算出来。

【讨论】：

不，这与使用 LatLngBounds() 完全相同。也许（质心？）让您感到困惑？ img62.imageshack.us/img62/2145/nonot.png
..如果我实际上想要这样做，不确定哪个会更好，这需要你包含另一个库，另一方面 LatLngBounds() 需要您收集所有 latLngs 的数组并在其上调用 getCenter() 函数，很难说哪个更有效:)
我看不懂你的截图
看看这个g.co/maps/fvm62点击左侧的“Běžecká stopa Mílovská”，看看信息窗口出现在哪里，我希望它也出现在那里，但是使用你的代码，或者 LatLngBounds，它似乎在那里 img62.imageshack.us/img62/2145/nonot.png
尝试使用 computeLength() 并将折线的完整路径传递给它

【解决方案4】：

要获得折线的坐标，您应该这样做：

var widePath = new google.maps.Polyline({
path: waypointsCoordinates,
strokeColor: '#3366FF',
strokeOpacity: 0.0,
editable: true,
draggable: true,                       
strokeWeight: 3
});

然后做：

var latLng [];
latLng = widePath.getPath().getArray();

【讨论】：

已经四年或更长时间了，我想现在确实有更好的方法来做到这一点。

【解决方案5】：

可能也有点老了，但为什么不在点击时添加信息框呢？

infowindow.setPosition(event.latLng);
infowindow.open(this.getMap());

如果是点击的话。

【讨论】：