¿Cómo se puede usar un LatLng para colocar marcadores en un mapa de Google, pero no para dibujar un polígono?

Question

Aproximadamente hace una semana, me encontré con un problema: en un mapa personalizado con motor de google, mis polígonos no aparecían, mientras que los marcadores de las mismas coordenadas son totalmente correctos. A pesar de mis esfuerzos con la API de Google Maps, parece que no puedo encontrar el motivo.

Here is a link to a screenshot of the map. flechas y los números son mi púrpura Además, muestran:

1. El google.maps.Marker pude colocar en los bordes de mi "región".
2. El artefacto generado por el código google.maps.Polygon. Es rojo como se esperaba, pero completamente fuera de lugar y extrañamente plano.

Aquí es la parte del código que se generan marcadores y polígonos:

var regionData = tecMap.regions[r]; 
var regionMapMarkers = new google.maps.MVCArray(); 

for (c in regionData.coords) { 
    var point = projection.worldToMap(regionData.coords[c]); 
    debugRegionPoints.push(point); 
    var thisLatLng = projection.fromPointToLatLng(point); 
    debugRegionLatLngs.push(thisLatLng); 
    regionMapMarkers.push(thisLatLng); 
} 

regionMapMarkers.forEach(function(latLng, m){ 
    var marker = new google.maps.Marker({  
     position: latLng, 
     map: map, 
     title: '', 
     optimized: false 
    }); 
    regionCorners.push(marker); 
}); 

var paths = new google.maps.MVCArray(); 
paths.push(regionMapMarkers); 

var region = new google.maps.Polygon({ 
    fillColor: "#FF0000", 
    fillOpacity: 0.35, 
    map: map, 
    paths: paths, 
    strokeColor: "#FF0000", 
    strokeOpacity: 0.8, 
    strokeWeight: 2  
}); 
regionPolys.push(region); 

Si usted se está preguntando acerca de la matriz de matrices, es todo a la par con la Google Maps Javascript API.

Si desea ver el mapa y los scripts relacionados, puede find it here. El fragmento de código se encuentra en Scripts/tectonicus.js, a partir de la línea 659.

[Editar] Parte de la información de depuración:

parece ser un problema de representación, no un "cálculo" uno. De consola de Firebug, en el mapa he vinculado, tanto

regionPolys[0].getPath().getArray(); 

y

for (i in regionCorners) {console.log(regionCorners[i].getPosition())}; 

volverá

P { Na=0.2, Oa=-22.5249097921875} 
P { Na=-0.21702715474330336, Oa=-32.7277467} 
P { Na=0.19466306397879407, Oa=-37.51230686484375} 
P { Na=0.12889785332031245, Oa=-49.04594858671875} 

Si estoy en lo cierto, significa que tienen las mismas coordenadas, que está a la par con el código.

[Editar2] ¡Nuevos avances!

Parece que los vectores tienen problemas de representación cuando se trata de una proyección personalizada, como la que se utiliza para mostrar este mapa isométrico de Minecraft. (Generado con Tectonicus)

Después de los últimos comentarios, estoy añadiendo al código en directo vinculado anteriormente dos nuevas matrices de depuración, debugRegionLatLngs y debugRegionPoints. El código anterior se actualiza para que pueda ver lo que contienen.

[Edit3] Proyección y coordina la investigación de

Crossing BicycleDude con la mía, ahora es casi seguro que se trata de la proyección a medida que destruye polígonos. De hecho, hay a possibly related bug in Google Maps' API.

Esta proyección se utiliza porque los mapas de Minecraft pueden ser virtualmente infinitos y, sin embargo, tienen que usar un gmap, que se ajusta después de una longitud de 360 ​​°.También está relacionado el hecho de que las coordenadas del juego se representan de forma isométrica, mientras que gmaps espera algo más parecido a la proyección de Mercator.

Traté de ajustar la proyección un poco, pero no tuve resultados interesantes hasta el momento.

Answer 1

Hmm, miré más allá y veo ese polígono de hebra. Si nota sus latitudes, están extremadamente cerca de 0 grados, lo que significa prácticamente una línea plana cerca del ecuador. Lo validé yo mismo al pegar tus coordenadas en una nueva muestra de Google Maps y no parecen estar localizadas espacialmente con tus marcadores, por lo tanto, debes revisar dónde se manipula la información de las coordenadas, lo siento, sé que no lo hice encuentra tu problema

He modificado la muestra del triángulo de las Bermudas de Google Map para usar su estilo de codificación. es decir, adopté tus variables y seguí el espíritu de tu código. Este ejemplo muestra 3 marcadores y dibuja un polígono para el triángulo de las Bermudas.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bermuda Hack Triangle</title> 
    <meta name="viewport" 
     content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <style type="text/css"> 
     #map_canvas { 
     width: 500px; 
     height: 500px; 
     } 
    </style> 
    <script type="text/javascript" scr="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     var map; 
     function initialize() { 
     var myoptions = { 
      zoom: 4, 
      center: new google.maps.LatLng(25, -70), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(
      document.getElementById('map_canvas'), 
      myoptions 
     ); 

     // Create pseudo coordinates 
     var regionMapMarkers = new google.maps.MVCArray(); 
     var p1 = new google.maps.LatLng(25, -80); 
     var p2 = new google.maps.LatLng(18, -66); 
     var p3 = new google.maps.LatLng(32, -64); 
     //p2.Qa += 360; 
     //p3.Qa -= 360; 
     regionMapMarkers.push(p1); 
     regionMapMarkers.push(p2); 
     regionMapMarkers.push(p3); 
     console.log(JSON.stringify(regionMapMarkers)); 

     // Draw Markers 
     regionMapMarkers.forEach(function(latLng, m){ 
      var marker = new google.maps.Marker(
      {   
      position: latLng, 
      map: map, 
      title: '', 
      optimized: false 
      }); 
     }); 

     // Draw Polygon 
     var region = new google.maps.Polygon({ 
      map: map, 
      paths: regionMapMarkers, 
      strokeColor: "#FF0000", 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: "#FF0000", 
      fillOpacity: 0.35 
     }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    </body> 
</html> 

La muestra funciona. Si fueras a ejecutarlo, obtendrás el triángulo de las Bermudas rodeado de marcadores. La pregunta entonces radica, ¿qué puede, en la práctica, afectar su algoritmo? Hasta ahora, hemos especulado que la proyección de Minecraft hace algo. Sigo creyendo que ese es el caso.

Para validar esa teoría, traté de destruir la muestra del triángulo de las Bermudas. He intentado sumar y restar 360 grados de longitud a dos puntos eliminando el comentario de las siguientes líneas:

 p2.Qa += 360; 
     p3.Qa -= 360; 

Lo que esto hace es que todavía le permitirá colocar los marcadores en el mismo lugar, pero el relleno de polígono va absolutamente spacko. Creo que esto es lo que está sucediendo en su escenario.

Lo que entonces recomiendo que haga es revisar el sistema de coordenadas en su aplicación. Si puede elegir nuevas coordenadas, puede evitar que sucedan tales condiciones de borde.

Answer 2

Me di cuenta de que está pasando paths como MVCArray que contiene otro MVCArray. ¿Has intentado simplemente pasar una matriz simple de una dimensión como en el ejemplo de Google en los documentos?

¿Y necesita llamar al setMap() o está pasando en la propiedad map lo suficiente para hacerlo renderizar?

---

A continuación se Polígono de Google() ejemplo de código ... (from here)

function initialize() { 
    var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875); 
    var myOptions = { 
    zoom: 5, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var bermudaTriangle; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var triangleCoords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.75737), 
    new google.maps.LatLng(25.774252, -80.190262) 
    ]; 

    // Construct the polygon 
    // Note that we don't specify an array or arrays, but instead just 
    // a simple array of LatLngs in the paths property 
    bermudaTriangle = new google.maps.Polygon({ 
    paths: triangleCoords, 
    strokeColor: "#FF0000", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#FF0000", 
    fillOpacity: 0.35 
    }); 

    bermudaTriangle.setMap(map); 
}