В моем мобильном приложении Ionic/ Angular у меня есть Uber-подобная карта, в которой пользователь может перетащить карту, чтобы выбрать местоположение, и в центре есть маркер, который всегда закреплен в центре.
Для этого я выполнил инструкции здесь и here.
Итак, мой HTML выглядит примерно так:
<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>
SASS связан с этим:
.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;
}
}
И, наконец, часть моего контроллера, которая имеет дело с картой, такова:
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);
Как вы можете видеть, у меня есть два метода: loadStoredPosition
и updateStoredPosition
, которые просто извлекают и сохраняют широту и долготу в службе.
Это нормально работает, я могу перемещать карту и каждый раз, когда сохраненная позиция будет обновляться правильно.
Проблема заключается в том, что когда я оставляю представление (после выбора местоположения), а затем возвращаю (позиция по-прежнему остается такой же, как и последняя), похоже, что маркер не указывает на правильное местоположение, а немного дальше вверх (это всегда одно и то же смещение).
Кто-нибудь знает, почему это может произойти?
EDIT:
Маркер появляется в правильном месте при первом обращении к просмотру. Но каждый раз, когда я просматриваю представление, маркер больше не указывает на правильное местоположение, а на несколько пикселей вверх. Я должен также упомянуть, что представление не кэшируется, поэтому карта воссоздается каждый раз.
Наконец, одна любопытная вещь, которую я заметил, это то, что в первый раз, когда я получаю доступ к этому представлению, карта после его видимости, она немного подпрыгивает и немного расширяется!