谷歌地图的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，它们只是从服务中检索和保存纬度和经度。

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

问题在于，当我离开视图（在选择位置后）然后返回时（位置仍然与上一个相同），看起来标记不指向正确的位置，而是稍微偏上一些（偏移总是相同的）。

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

编辑：

标记出现在第一次访问视图时的正确位置。但是，在所有后续访问视图时，标记不再指向正确位置，而是向上移动了几个像素。我还应该提到，该视图未缓存，因此每次都会重新创建地图。

最后，我注意到一个奇怪的事情是，我第一次访问这个视图时，地图在可见之后会跳动一下并略微扩展！

- Alex Ntousias

---

你提到标记总是偏离同样的偏移量；你有大约的值吗？ - DRobinson

我刚刚检查了一下，大约是30像素。有什么理论吗？ - Alex Ntousias

只是一个想法：SASS 中可能存在错误？height: 50px; margin-top: -50px; 可能不能确保正确的居中。 - petr

我可能会在标记选项中设置标记位置，参见此处https://dev59.com/f2435IYBdhLWcg3wmxXz。或者，如果您离开地图，请尝试map.remove()，当您返回时再次调用initialize。我两周前在leaflet + tomtom上遇到了类似的问题，这种方法解决了这个问题。另一个可能性是始终设置地图边界，以确保地图容器始终相同。 - stackg91

@stackg91 我在地图上找不到任何remove()函数。所以我尝试销毁包含地图的div，但没有改变任何东西！关于另一种解决方案，即将标记添加为MarkerImage，不幸的是，我希望它始终指向地图的中心，无论您移动地图多少次（类似Uber的地图）。 - Alex Ntousias

Answer 1

ngmap 最近为这种目的添加了“custom-marker”。

使用custom-marker，您可以拥有具有HTML的完全工作标记。它还使用Google Maps 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的创建者。

- allenhwkim

---

我尝试了这种方法，但问题在于标记的位置变化不是很平滑。理想情况下，我们希望它始终位于中心...使用您的方法，当用户移动地图时，标记也会稍微移动一段时间，直到重新调整到中心。 - Alex Ntousias