javascript 谷歌地图折线的中间（质心？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7818872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google maps middle of a polyline (centroid?)
提问by fxck
I have a list of polylines, just like google maps doeswhen I click on the polyline I want an infowindow to show up just where I clicked, and it works just fine with this function
我有一个多段线列表，就像谷歌地图在我点击多段线时所做的一样，我希望信息窗口显示在我点击的位置，并且它与此功能配合得很好
function mapsInfoWindow(polyline, content) {
google.maps.event.addListener(polyline, 'click', function(event) {
infowindow.content = content;
infowindow.position = event.latLng;
infowindow.open(map);
});
}
the problem comes when I click on the list(using the same function for that), eventobviously doesn't have the latLng, but I'd like infowindow to show up in the middle of the polyline anyway, just like it does when you click on the list in the google maps link I mentioned before.
当我点击列表（使用相同的功能）时，问题就出现了，事件显然没有latLng，但我希望 infowindow 无论如何都显示在折线的中间，就像当你一样单击我之前提到的谷歌地图链接中的列表。
Tried LatLngBounds(); but that gives the actuall center of the area the polylines create, not the middle I need.
试过 LatLngBounds(); 但这给出了折线创建的区域的实际中心，而不是我需要的中间。
Any idea how to do it?
知道怎么做吗？
回答by fxck
So this is the(bit hacky) solution.
所以这是（有点hacky）解决方案。
Use http://www.geocodezip.com/scripts/v3_epoly.jslibrary, then count the total length of you polyline(various ways), divide it in half and call epoly's .GetPointsAtDistance() function upon it.
使用http://www.geocodezip.com/scripts/v3_epoly.js库，然后计算折线的总长度（各种方式），将其分成两半并在其上调用 epoly 的 .GetPointsAtDistance() 函数。
This should return LatLng point, but it acts a bit weird sometimes, returning two points or even turning that point somehow "broken". So the most secure thing you can do is probably this:
这应该返回 LatLng 点，但有时它的行为有点奇怪，返回两个点甚至以某种方式“破坏”该点。所以你能做的最安全的事情可能是这样的：
var pointInHalf = polyline.GetPointsAtDistance(polylineLength);
var pointCoordinate = new google.maps.LatLng(pointInHalf[0].lat(), pointInHalf[0].lng());
Well, better than nothing.
嗯，总比没有好。
回答by Shane Best
From http://www.geocodezip.com/v3_polyline_example_geodesic_proj.html
来自http://www.geocodezip.com/v3_polyline_example_geodesic_proj.html
Without extensions and assuming the polyline is a straight line.
没有扩展并假设折线是一条直线。
It is possible to convert the lat/lng coordinates to point plane (x,y) postions and calculate the average between the two. This will give you a central pixel position. You can then convert this position back to a latlng for map plotting.
可以将 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");
More information on changing the projection http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection
有关更改投影的更多信息http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection
回答by duncan
So firstly you need to use the geometry library which calculates distances. Add libraries=geometry to your JS call, e.g.
所以首先你需要使用计算距离的几何库。将 libraries=geometry 添加到您的 JS 调用中，例如
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
Assuming you know the start point and end point for your polyline, you should be able to do this:
假设您知道折线的起点和终点，您应该能够执行以下操作：
var inBetween = google.maps.geometry.spherical.interpolate(startLatlng, endLatlng, 0.5);
infowindow.position = inBetween;
I guess if you don't already know the start and end points, you could work it out from polyline.getPath().
我想如果你还不知道起点和终点，你可以从 polyline.getPath() 算出来。
回答by Jefferson Maretti
to get the coordinates of your polyline you should do:
要获取折线的坐标，您应该执行以下操作：
var widePath = new google.maps.Polyline({
path: waypointsCoordinates,
strokeColor: '#3366FF',
strokeOpacity: 0.0,
editable: true,
draggable: true,
strokeWeight: 3
});
and do:
并做：
var latLng [];
latLng = widePath.getPath().getArray();
回答by Richard Housham
Might be a bit old as well, but why not add the infobox on the click?
也可能有点旧，但为什么不在点击时添加信息框？
infowindow.setPosition(event.latLng);
infowindow.open(this.getMap());
If it's a click that is.
如果它是一个点击。
