3

Google지도처럼 폴리 라인 목록이 있습니다. does 폴리 라인을 클릭하면 infowindow가 클릭 한 위치에 나타나기를 원합니다. 나는 latLng를이없는, 분명히 이벤트 (즉에 대한 동일한 기능을 사용) 목록을 클릭,하지만 난에 표시하는 정보창을하고자 할 때 기능폴리 라인의 중간 부분 (중심)?

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

문제가 온다 Google지도 링크 I mentioned before에서 목록을 클릭 할 때와 마찬가지로 어쨌든 폴리 라인 중간입니다.

시도한 LatLngBounds(); 하지만 폴리 라인이 만들어내는 영역의 중심을 제공합니다. 필요한 중간이 아닙니다.

어떻게해야할까요?

+0

나는 즉시 사용할 수있는 해결책이 없지만 여기에 단서가 있습니다. (http://rbrundritt.wordpress.com/2008/10/14/calculate-midpoint-of-polyline/) 솔루션을 답으로 게시하십시오. 건배. – dmitry

+0

API 자체가 도움을 줄 수 있는지 궁금한가요? 분명히 그렇지 않습니다. 나는이 링크를 살펴볼 것이다. 고마워. – foxx

+0

http://gis.stackexchange.com/questions/2128/algorithm-for-finding-irrregular-polygon-centroid-label-point 더 많은 단서 – foxx

답변

4

그래서 이것은 (비트 해키) 해결책입니다.

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

먼저 거리를 계산하는 지오메트리 라이브러리를 사용해야합니다. JS 통화에 libraries = geometry를 추가합니다 (예 :

<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()에서 그것을 해결할 수 있습니다.

+0

아니, 정확히 LatLngBounds()를 사용하는 것과 같습니다 .. 아마도 그 (중심?) 당신을 혼란스럽게 만들었습니까? http://img62.imageshack.us/img62/2145/nonot.png – foxx

+0

.. 그리고 ** 실제로 ** 이렇게하고 싶다면 어떤 것이 더 좋을지 모르겠지만 다른 라이브러리를 포함해야합니다. LatLngBounds()를 사용하려면 모든 latLng 배열을 수집하고 getCenter() 함수를 호출해야합니다. 더 효과적이라고 말하기는 어렵습니다. – foxx

+0

스크린 샷을 이해할 수 없습니다 – duncan

4
확장없이 http://www.geocodezip.com/v3_polyline_example_geodesic_proj.html

에서

과 폴리 라인을 가정하고 직선이다.

위도/경도 좌표를 점 평면 (x, y) 위치로 변환하고 두 점 사이의 평균을 계산할 수 있습니다. 이렇게하면 중앙 픽셀 위치를 얻을 수 있습니다. 그런 다음이 위치를지도 플로팅을위한 latin으로 다시 변환 할 수 있습니다. 폴리 라인의 좌표를 얻기 위해 투사 http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

+0

직선과는 거리가 멀습니다. http://g.co/maps/vfb9n – foxx

+1

그런 다음 질문을 좀 더 잘 수행해보십시오. –

+0

방금 ​​준 링크도 첫 번째 게시물에 있습니다.) 다른 게시물의 대부분에서 http://img62.imageshack.us/img62/2145/nonot이 아닌 것을 지적했습니다. png – foxx

2

변경에

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

자세한 정보는 당신이 수행해야합니다

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(); 
+1

4 년이 지났습니다. 지금이 방법이 실제로 더 좋은 방법이라고 상상합니다. – foxx

2

조금 수 있습니다 오래된 정보도 있지만 클릭 할 때 infobox를 추가하지 않는 이유는 무엇입니까?

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

클릭하면됩니다.

관련 문제