2010-10-23 18 views
9

Sto sviluppando un'applicazione basata su jQTouch per iPhone e parte di essa utilizza l'API di Google Maps (V3). Voglio essere in grado di passare le coordinate di geolocalizzazione alla mappa e centrarla con un pennarello. Quello che sto ottenendo ora è la mappa al giusto livello di zoom ma il punto centrale desiderato appare nell'angolo in alto a destra. Mostra anche solo circa un terzo dell'area della mappa (il resto è grigio) e si comporta in modo un po 'irregolare quando si esegue una panoramica o uno zoom. Ecco il codice:Google Map V3 non centrato, visualizza solo parte della mappa


var coords = { latitude : "35.510630", longitude : "-79.255374" }; 
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
var myOptions = { 
    zoom: 12, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
});  

BTW: Si guarda e si comporta allo stesso su altre piattaforme/browser pure.

Pensieri?

Grazie in anticipo,

Segna


Aggiunto Ecco un link che ti mostrano esattamente cosa sta succedendo: Screen shot of iPhone emulator

risposta

0

Assicurarsi di aver impostato la larghezza/altezza del tela assolutamente (ie)

$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height()); 

Ovviamente si ha la barra degli strumenti jqtouch attiva e funzionante ...

+0

Grazie, Kris. Il problema non è quello di portare la tela alla giusta dimensione, ma la sua mappa reale all'interno della tela. Mi sono collegato a una schermata sopra. – mpemburn

+0

Hmmm, avremo usato il codice quasi esattamente lo stesso e il mio unico problema è stato quello di impostare le dimensioni assolute sulla tela. Non posso aiutarti con quello, quindi ... –

17

Suppongo che tu stia utilizzando AJAX per visualizzare la mappa, oppure che la mappa venga nascosta in qualche punto e quindi visualizzata in base a un azione?

In questo caso Google non conosce la dimensione del contenitore della mappa e disegna solo una parte della mappa, solitamente decentrata.

Per risolvere questo problema, ridimensionare la mappa, quindi centrare nuovamente il lat/lng. Qualcosa di simile a questo:

google.maps.event.trigger(map, 'resize'); 

// Recenter the map now that it's been redrawn    
var reCenter = new google.maps.LatLng(yourLat, yourLng); 
map.setCenter(reCenter); 
+1

google.maps.event.trigger (mappa, 'ridimensiona'); risolto il mio problema – Wen

+0

@mpemburn - hai mai risolto questo? –

1

Vedere la mia risposta sul Google Maps API 3 & jQTouch

fondamentalmente, il tuo div #map_canvas non è visibile al momento si sta costruendo la mappa come il div è in è stato nascosto da jQTouch. l'API non può occuparsi di questo e ottenere la dimensione sbagliata.

sarebbe molto più semplice se gmaps v3 consentisse l'impostazione di dimensioni esplicite nel costruttore (come ha fatto la v2).

in ogni caso, ritarda la mappa fino a "paginaAnimazioneEnd".

2

La soluzione per ottenere correttamente la rinomina della mappa è eseguire il codice di Maps a paginaAnimazioneEnd-Event di jQTouch.

Esempio entro Pagina #div:

<div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div> 
    <script type="text/javascript"> 

    $('#map').bind('pageAnimationEnd', function() { 

     var mapOptions = { 
      zoom: 13, 
      disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude) 

        var marker = new google.maps.Marker({ 
         map: map, 
         draggable: false, 
         position: pos 
        }); 

        map.setCenter(pos); 
       }, function() { 
        console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed'); 
       } 
      ); 
     } else { 
      console.log('Device Environment Not Capable of Geolocation - Geolocation failed'); 
     } 
    }); 
    </script> 

Anche se, mi trovo a dover briga di fare la mappa a schermo intero altezza. Qualsiasi aiuto in questo caso è apprezzato. Si noti che im utilizzando l'estensione barre DataZombies per la navigazione del footer fisso.

0

Aveva lo stesso identico problema nel caricare una mappa con le indicazioni dopo aver caricato il contenuto con AJAX e mostrare e nascondere il div cartografico.

Devi attivare l'evento di ridimensionamento, come dice Brett DeWoody, ma ho scoperto che la mia variabile globale era fuori portata e dovevo fare riferimento a loro, ovvero la variabile di mappa di google, INSIDE le mie funzioni esplicitamente sull'oggetto della finestra . Ecco quello che ho dentro il mio directionsService risposta: la soluzione di

if (status == google.maps.DirectionsStatus.OK) { 

    directionsDisplay.setDirections(response); 

    google.maps.event.trigger(window.map, 'resize'); 

} 
0

Brett DeWoody lavorato, ma come sto mostrando la mappa in modal l'unica soluzione per me è stato di aggiungere setTimeout in questo modo:

setTimeout(function() { 
    google.maps.event.trigger(map, 'resize'); 
    var reCenter = new google.maps.LatLng(lat, lng); 
    map.setCenter(reCenter); 
}, 500); 

Dopo aver aggiunto setTimeout, la mappa esegue il rendering e si concentra perfettamente.

Problemi correlati