Google地图setCenter未正确对齐地图

Question

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

为实现这一目标，我按照here和here的说明进行操作。

所以，我的HTML看起来如下所示：

UNSAFE ASSEMBLY

SASS与此相关：

EXTERNAL ACCESS ASSEMBLY

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

<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>

如您所见，我有两种方法，.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); ，它们只是检索并保存服务的纬度和经度。

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

问题在于，当我离开视图（选择位置后）然后返回（位置仍然与最后一个位置相同）时，看起来标记没有指向正确的位置但是更进一步（它总是相同的偏移量）。

有谁知道为什么会这样？

编辑：

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

最后，我注意到的一个奇怪的事情是，当我第一次访问此视图时，地图会在其可见后显示，它会稍微弹跳并略微扩展！

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