Google地图setCenter未正确对齐地图

Question

在我的Ionic/Angular移动应用程序中,我有一个类似Uber的地图,用户可以拖动地图来选择一个位置,并且总是有一个标记固定在中心.

为此,我按照这里和这里的说明进行操作.

所以,我的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,这只是检索和保存的纬度和经度的服务.

这工作正常,我可以移动地图,每次存储的位置都会正确更新.

问题是,当我离开视图(选择一个位置后)然后返回(位置仍然与最后一个位置相同)时,看起来标记没有指向正确的位置而是稍微向上(它总是相同的偏移).

有谁知道为什么会发生这种情况？

编辑:

我第一次访问视图时,标记出现在正确的位置.但是在我访问视图的所有连续时间内,标记不再指向正确的位置,而是指向几个像素.我还应该提到视图没有缓存,因此每次都会重新创建地图.

最后,我注意到的一个奇怪的事情是,我第一次访问此视图时,地图在可见之后,它会进行一次小的弹跳并稍微扩展!

Answer 1

ngmap最近为此添加了“自定义标记”。

使用custom-marker，您可以使用 html 获得完全可用的标记。它还使用谷歌地图 API 响应所有点击、鼠标悬停事件。

这就是例子。

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

这是所需的代码，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

仅供参考，我是ngmap.