谷歌地图 setCenter 未正确居中地图

Question

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

为此，我按照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;
    }
}

最后，我的控制器中处理地图的部分是这样的：

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 的创建者。