4

我有一个折线列表，就像我点击折线时谷歌地图所做的那样

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

当我单击列表时出现问题（为此使用相同的功能），事件显然没有latLng，但我希望 infowindow 无论如何都显示在折线的中间，就像当你点击我之前提到的谷歌地图链接中的列表。

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

知道怎么做吗？

4

5 回答 5

5

所以这是（有点hacky）解决方案。

使用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());

好吧，总比没有好。

于 2011-12-19T17:19:58.850 回答
4

来自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");

有关更改投影的更多信息http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

于 2012-02-01T03:36:56.913 回答
2

所以首先你需要使用计算距离的几何库。将 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() 中计算出来。

于 2011-10-19T13:30:32.110 回答
2

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

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

如果是点击，那就是。

于 2016-03-21T16:15:26.453 回答
2

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

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();
于 2015-09-11T17:23:07.607 回答