angularjs - Google map setCenter 未正确将 map 居中

Question

在我的 Ionic/Angular 移动应用程序中，我有一个类似 Uber 的 map ，基本上用户可以拖动 map 来选择位置，并且有一个标记始终固定在中心。

为了实现这一目标，我按照 here 中的说明进行操作。和 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;
    }
}

最后，我的 Controller 处理 map 的部分是这样的:

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，它们只是检索纬度和经度并将其保存到服务中。

这工作正常，我可以移动 map ，并且每次存储的位置都会正确更新。

问题是，当我离开 View (选择位置后)然后返回(位置仍然与上一个相同)时，标记看起来没有指向正确的位置，而是指向更上方的位置(它始终是相同的偏移量)。

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

编辑:

我第一次访问 View 时，标记会出现在正确的位置。但我连续多次访问 View 时，标记不再指向正确的位置，而是向上几个像素。我还应该提到的是， View 没有缓存，因此每次都会重新创建 map 。

最后，我注意到的一件奇怪的事情是，当我第一次访问此 View 时， map 可见后，它会发生轻微的弹跳并稍微扩展!

Answer 1

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

使用自定义标记，您可以使用 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()" 添加到您的 map 指令，并将以下内容添加到您的 Controller 。

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

我尝试了与您要求的不同的方法，但可能值得一试。

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

仅供引用，我是 ngmap 的创建者。