Bug delle mappe: i marcatori si spostano dappertutto quando si cambiano gli angoli di visualizzazione. Difficoltà?

Question

API di Google Javascript API 3.5

Il problema di fondo è che se si ha un indicatore che si trova su un punto fisso come un idrante nella vista dall'alto, si passa alla visualizzazione a 45 gradi, il contrassegno non viene più visualizzato in alto dell'idrante. E viceversa (posiziona il marcatore in vista a 45 gradi e poi passa a overhead).

di riprodursi:

See campione qui: www.zingjet.com/maptest.html

-Creare una base pagina web di Google Maps con un pennarello trascinabile. Con la posizione iniziale dell'indicatore/mappa su un'area con immagini a 45 gradi disponibili: (prova: 33.501472920248354, -82.01948559679795). Non sono sicuro che mostri questo problema per tutte le aree, quindi prova a farlo partire.

-Assicurarsi che si ingrandito nel vicino al massimo e in vista satellitare

-Spegnere immagini di 45 gradi

-Posizione segnalino punto fisso (angolo di marciapiede, camino casa, ecc)

-change to 45 gradi view.

-Nota quella posizione marcatore viene spostato

-Prova ruotando il 45 gradi e vediamo come marcatore si sposta rispetto al punto originale sull'immagine.

-Tornare indietro e il marker si trova nel punto originale.

Perché è un problema: Non so di cosa fidarsi. Quale vista mostra la posizione precisa per quel marcatore? Non è possibile creare pagine Web che consentano alle persone di posizionare i marcatori in una vista e vederli in un'altra. Principali incoerenze.

Answer 1

Quello che dovrete fare probabilmente è hackerarlo. Per quanto riguarda Google, probabilmente non c'è errore e il punto sulla mappa "appare" in un posto diverso perché la vista a 45 gradi cambia la prospettiva sulla mappa, e quindi come un long lat discreto apparirà fisicamente sulla mappa (cose simili possono accadere quando lo zoom cambia). Quello che devi fare è capire che cos'è il delta tra le visualizzazioni e quindi agganciare l'evento "tilt_changed" e aggiustare il tuo marker in modo appropriato. Un buon modo semplice per imparare il delta è quello di associare l'evento "DblClick" per avvisare a voi i dati latlng il mouse è acceso:

google.maps.event.addDomListener(map, 'dblclick', function(MouseEvent){ 
     alert(MouseEvent.latLng.lat()+" "+MouseEvent.latLng.lng()); 
    }); 
// make sure you disable the maps default zoom on double click 
//or choose a different event or it will get annoying :) 

e poi DoppioClic schermo in cui il marcatore "dovrebbe essere" e creare una funzione che regola l'indicatore di conseguenza. In teoria potresti essere in grado di definire una funzione che funziona su qualsiasi angolo in modo che tutto ciò che devi fare sia passare la posizione di ogni marker attraverso la funzione su tilt_changed.Fatemi sapere se questo è un buon inizio per voi :)

Answer 2

AGGIORNATO 2

• demo:http://bit.ly/IhpeBu

 var map, marker, overlay, latlng, zoom = 20; 
     function initialize() { 
      latlng = new google.maps.LatLng(33.501472920248354, -82.01948559679795); 
      var myOptions = { 
       zoom : zoom, 
       center : latlng, 
       tilt : 0, 
       mapTypeId : google.maps.MapTypeId.SATELLITE 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      overlay = new google.maps.OverlayView(); 
      overlay.draw = function() { 
      }; 
      overlay.onRemove = function() { 
      }; 
      overlay.setMap(map); 
      marker = new google.maps.Marker({ 
       position : latlng, 
       map : map, 
       draggable : true, 
       title : "Hello World!" 
      }); 

      google.maps.event.addListener(map, 'zoom_changed', function() { 
       zoom = map.getZoom(); 
      }); 

      google.maps.event.addListener(map, 'dragend', function() { 
       overlay.setMap(map); 
      }); 

      google.maps.event.addListener(marker, 'dragend', function(evt) { 
       var tilt = map.getTilt(); 
       latlng = new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng()); 
       if(tilt === 45) { 
        var projection = overlay.getProjection(); 
        var latlng2pixel = projection.fromLatLngToContainerPixel(marker.getPosition()); 

        var delta = 0; 
        switch(zoom) { 
         case 20: 
          delta = 45; 
          break; 
         case 19: 
          delta = 12; 
          break; 
         case 18: 
          delta = 4; 
          break; 
        } 
        latlng = projection.fromContainerPixelToLatLng(new google.maps.Point(latlng2pixel.x, (latlng2pixel.y + delta))); 
       } 
      }); 

      google.maps.event.addListener(map, 'tilt_changed', function() { 
       var tilt = map.getTilt(); 
       if(tilt === 45) { 
        var delta = 0; 
        switch(zoom) { 
         case 20: 
          delta = 65; 
          break; 
         case 19: 
          delta = 32; 
          break; 
         case 18: 
          delta = 16; 
          break; 
        } 
        var projection = overlay.getProjection(); 
        var latlng2pixel = projection.fromLatLngToContainerPixel(marker.getPosition()); 
        var pixel2latlng = projection.fromContainerPixelToLatLng(new google.maps.Point(latlng2pixel.x, (latlng2pixel.y - delta))); 
        marker.setPosition(pixel2latlng); 
       } else { 
        marker.setPosition(latlng); 
       } 
      }); 
     } 

NOTE: il co di sopra lavoro come segue:

1. Applicare una sovrapposizione personalizzata per utilizzare il; google.maps.MapCanvasProjection object^doc
2. Trova la posizione in pixel dell'indicatore;
3. Aggiungi allo (top = lng) i 45 gradi (45 pixel con zoom 20) più 20 pixel dell'altezza dell'icona del marcatore (x rimangono sempre invariati poiché il cambio dei gradi è una semplice illusione ottica;));
4. Converti la posizione dei pixel in una posizione di latlng valida;
5. osservare se il metodo tilt cambia da 0 a 45 e viceversa e agire di conseguenza impostando le nuove coordinate.