Карты Google setCenter не правильно центрируют карту

В моем мобильном приложении 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:

Маркер появляется в правильном месте при первом обращении к просмотру. Но каждый раз, когда я просматриваю представление, маркер больше не указывает на правильное местоположение, а на несколько пикселей вверх. Я должен также упомянуть, что представление не кэшируется, поэтому карта воссоздается каждый раз.

Наконец, одна любопытная вещь, которую я заметил, это то, что в первый раз, когда я получаю доступ к этому представлению, карта после его видимости, она немного подпрыгивает и немного расширяется!

Ответ 1

ngmap недавно добавил "настраиваемый маркер" для этой цели.

С custom-marker вы можете иметь полностью рабочий маркер с html. Он также реагирует на все события click, mouseover, используя API карт google.

Это пример.

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

NBFSf.png

И это необходимый код, https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/custom-marker-2.html.

Как вы видите в коде, Javascript не требуется.

Чтобы центрировать маркер все время, все, что вам нужно сделать, это добавить on-center-changed="centerCustomMarker()" в свою директиву карты и следующее к вашему контроллеру.

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

Я пробую другой подход, чем вы просили, но это может стоить попробовать.

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

FYI, я создатель ngmap.