que - poligonos google maps javascript

google maps medio de una polilínea(centroide?)

Question

Tengo una lista de polilíneas, al igual que google maps cuando hago clic en la polilínea Quiero que aparezca una ventana de información justo donde hice clic, y funciona muy bien con esta función

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

el problema surge cuando hago clic en la lista (usando la misma función para eso), obviamente, el evento no tiene latLng , pero me gustaría que infowindow aparezca en el medio de la polilínea de todos modos, al igual que lo hace cuando haga clic en la lista en el enlace de google maps que mencioné antes .

Intentó LatLngBounds (); pero eso le da al centro actual del área que crean las polilíneas, no a la mitad que necesito.

¿Alguna idea de cómo hacerlo?

Answer 1

Entonces esta es la solución (bit hacky).

Use la biblioteca http://www.geocodezip.com/scripts/v3_epoly.js , luego cuente la longitud total de su polilínea (varias formas), divídala por la mitad y llame a la función .GetPointsAtDistance () de epoly.

Esto debería devolver el punto LatLng, pero a veces actúa un poco raro, devolviendo dos puntos o incluso convirtiendo ese punto de alguna manera "roto". Entonces, lo más seguro que puede hacer es probablemente esto:

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

Bueno, mejor que nada.

Answer 2

Entonces, primero debe usar la biblioteca de geometría que calcula las distancias. Agregue bibliotecas = geometría a su llamada JS, por ejemplo

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

Suponiendo que conoce el punto de inicio y el punto final de su polilínea, debería poder hacer esto:

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

Supongo que si aún no conoce los puntos de inicio y fin, podría resolverlo desde polyline.getPath ().

Answer 3

para obtener las coordenadas de su polilínea, debe hacer:

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

y hacer:

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

Answer 4

Puede que también sea un poco viejo, pero ¿por qué no agregar el cuadro de información al hacer clic?

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

Si se trata de un clic.

Answer 5

Desde http://www.geocodezip.com/v3_polyline_example_geodesic_proj.html

Sin extensiones y asumiendo que la polilínea es una línea recta.

Es posible convertir las coordenadas lat / lng en posiciones del plano del punto (x, y) y calcular el promedio entre las dos. Esto te dará una posición de píxel central. A continuación, puede convertir esta posición a un latlng para el trazado del mapa.

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

Más información sobre cómo cambiar la proyección http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection