Come si può usare LatLng per posizionare i marcatori su una mappa di Google, ma non per disegnare un poligono?

Question

Circa una settimana fa, ho riscontrato un problema: su una mappa personalizzata basata su google, i poligoni non venivano visualizzati, mentre i marker per le stesse coordinate sono completamente ok. Nonostante i miei sforzi con l'API di Google Maps, sembra che non riesca a trovarne il motivo.

Here is a link to a screenshot of the map. frecce viola ed i numeri sono il mio Inoltre, essi mostrano:

1. Il google.maps.Marker ho potuto mettere ai bordi della mia "regione".
2. L'artefatto generato dal codice google.maps.Polygon. È rosso come previsto, ma completamente fuori posto e stranamente piatto.

Qui è la parte del codice in cui vengono generati Marcatori e poligoni:

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

Se vi state chiedendo circa l'array di array, è tutto alla pari con il Google Maps Javascript API.

Se si desidera visualizzare la mappa e gli script correlati, è possibile find it here. Il frammento di codice è in Scripts/tectonicus.js, a partire linea 659.

[Edit] Alcune informazioni di debug:

sembra essere un problema di rendering, non un "calcolo" uno. Da console Firebug, nella mappa ho collegato, sia

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

e

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

tornerà

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} 

Se ho ragione, significa che hanno le stesse coordinate, che è alla pari con il codice.

[Modifica2] Nuove anticipazioni!

Sembra che i vettori abbiano problemi di rendering quando si tratta di una proiezione personalizzata, come quella utilizzata per visualizzare questa mappa isometrica di Minecraft. (Generato con Tectonicus)

Dopo gli ultimi commenti, sto aggiungendo al codice vivo linkato sopra due nuovi array di debug, debugRegionLatLngs e debugRegionPoints. Sopra il codice viene aggiornato in modo da poter vedere cosa contengono.

[Edit3] Proiezione e coordina la ricerca di

Crossing BicycleDude con mio, è ormai quasi certo che è la proiezione personalizzata che distrugge poligoni. Infatti, c'è a possibly related bug in Google Maps' API.

Questa proiezione viene utilizzata perché le mappe Minecraft possono essere virtualmente infinite e devono tuttavia utilizzare una gmap, che si avvolge dopo 360 ° di longitudine.È anche collegato il fatto che le coordinate di ingame sono rese in modo isometrico, mentre gmaps si aspetta qualcosa di più simile alla proiezione di Mercatore.

Ho provato a modificare leggermente la proiezione, ma finora non ho avuto risultati interessanti.

Answer 1

Hmm, ho guardato oltre e vedo quel frammento di poligono. Se noti le tue latitudini, sono estremamente vicine a 0 gradi che significa praticamente una linea piatta vicino all'equatore. L'ho convalidato incollando le tue coordinate in un nuovo campione di Google Maps e non sembrano essere localizzate spazialmente con i tuoi marcatori, quindi è necessario rivedere dove vengono manipolate le informazioni sulle coordinate, mi dispiace, so che non l'ho fatto trova il tuo problema

Ho modificato l'esempio di triangolo di Bermuda di Google Map per utilizzare lo stile di codifica. Ad esempio, ho adottato le tue variabili e ho seguito lo spirito del tuo codice. Questo esempio mostra 3 segnalini e disegna un poligono per il triangolo di Bermuda.

<!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> 

L'esempio funziona. Se dovessi eseguirlo, otterrai il triangolo Bermuda circondato da marker. La domanda quindi giace, cosa può, in pratica, influire sul tuo algoritmo? Finora, abbiamo ipotizzato che la proiezione di Minecraft faccia qualcosa. Credo ancora che sia così.

Per convalidare questa teoria, ho provato a distruggere il campione del triangolo delle Bermuda. Ho provato aggiungendo e sottraendo 360 gradi di longitudine di due punti decommentando le seguenti linee:

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

Quello che fa è che consentirà ancora di collocare i marcatori nella stessa posizione, ma il riempimento poligono va assolutamente spacko. Credo che questo sia ciò che sta accadendo nel tuo scenario.

Quello che consiglio di fare è rivedere il sistema di coordinate nell'applicazione. Se è possibile scegliere nuove coordinate, è possibile evitare che si verifichino tali condizioni di bordo.

Answer 2

Ho notato che stai passando paths come un MVCArray che contiene un altro MVCArray. Hai provato a passare un semplice array monodimensionale come nell'esempio di Google nei documenti?

E hai bisogno di chiamare setMap() o è sufficiente passare la proprietà map per renderla visibile?

---

Di seguito si riporta di Google Polygon() esempio di codice ... (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); 
}