Google maps setCenter non sta centrando correttamente la mappa

Question

Nella mia app mobile Ionic/Angular, ho una mappa simile a Uber, in cui fondamentalmente l'utente può trascinare la mappa per selezionare una posizione e c'è un indicatore sempre appuntato al centro .

Per raggiungere questo obiettivo, ho seguito le istruzioni da here e here.

Quindi, il mio HTML simile a quanto segue:

<ion-view cache-view="false" view-title="Choose location"> 
    <ion-content has-header="true" class="new-meeting" has-bouncing="false"> 
     <div id="chooseLocationMap" class="full-map"></div> 
    </ion-content> 
</ion-view> 

Il SASS legata a quella:

.full-map { 
    width: 100%; 
    height: 100%; 

    .center-marker { 
     position: absolute; 
     background: url(../img/default-marker.svg) -10px -5px; 
     top: 50%; 
     left: 50%; 
     z-index: 1; 
     width: 40px; 
     height: 50px; 
     margin-top: -50px; 
     margin-left: -22px; 
     cursor: pointer; 
    } 
} 

E, infine, la parte del mio controller che si occupa con la mappa è questo:

function initialize() { 
    var initialPosition = loadStoredPosition(); 

    var mapOptions = { 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: true 
    }; 

    map = new google.maps.Map(document.getElementById('chooseLocationMap'), mapOptions); 

    google.maps.event.addListener(map, 'center_changed', function() { 
     updateStoredPosition(map.getCenter()); 
    }); 

    var markerDiv = document.createElement('div'); 
    markerDiv.className = 'center-marker'; 
    angular.element(map.getDiv()).append(markerDiv); 
} 

ionic.Platform.ready(initialize); 

Come potete vedere, ho i due metodi, loadStoredPosition e updateStoredPosition, che stanno solo recuperando e salvando la latitudine e la longitudine di un servizio.

Questo funziona correttamente, posso spostare la mappa e ogni volta che la posizione memorizzata verrà aggiornata correttamente.

Il problema è che quando esco dalla vista (dopo aver selezionato una posizione) e poi ritorno (la posizione rimane sempre la stessa dell'ultima), sembra che il marcatore non indichi la posizione corretta ma un po 'più lontano su (è sempre lo stesso offset).

Qualcuno sa perché questo potrebbe accadere?

EDIT:

L'indicatore appare nella posizione corretta la prima volta che sto Accesso alla vista. Ma tutte le volte consecutive in cui accedo alla vista, il marcatore non sta puntando più nella posizione corretta ma su alcuni pixel in alto. Dovrei anche menzionare che la vista non è memorizzata nella cache, quindi la mappa viene ricreata ogni volta.

Infine, una cosa curiosa che ho notato è che la prima volta che accedo a questa vista, la mappa dopo che è visibile, fa un piccolo rimbalzo e si espande leggermente!

Answer 1

ngmap aggiunto di recente "indicatore personalizzato" per questo tipo di scopo.

Con custom-marker, è possibile avere un marcatore completamente funzionante con html. Inoltre, risponde a tutti gli eventi facendo clic, passando il mouse utilizzando l'API di google maps.

Questo è l'esempio.

https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker-2.html

E questo è il codice richiesto, https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/custom-marker-2.html.

Come si vede nel codice, non è richiesto alcun Javascript.

Per centrare un marker, tutto il tempo, è sufficiente aggiungere on-center-changed="centerCustomMarker()" alla direttiva della mappa e quanto segue al controller.

$scope.centerCustomMarker = function() { 
     $scope.map.customMarkers.foo.setPosition(this.getCenter()); 
    } 

Provo un approccio diverso da quello che hai chiesto, ma potrebbe valere la pena provare.

GitHub: https://github.com/allenhwkim/angularjs-google-maps

FYI, io sono il creatore di ngmap.