angularjs – Google地图setCenter不是正确地对齐地图

前端之家收集整理的这篇文章主要介绍了angularjs – Google地图setCenter不是正确地对齐地图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的Ionic / Angular手机应用程序中,我有一个类似Uber的地图,基本上用户可以拖动地图选择一个位置,并且有一个标记总是固定在中心.

为达到此目的,我按照herehere的指示.

所以,我的HTML看起来像下面这样:

  1. <ion-view cache-view="false" view-title="Choose location">
  2. <ion-content has-header="true" class="new-meeting" has-bouncing="false">
  3. <div id="chooseLocationMap" class="full-map"></div>
  4. </ion-content>
  5. </ion-view>

SASS与此相关:

  1. .full-map {
  2. width: 100%;
  3. height: 100%;
  4.  
  5. .center-marker {
  6. position: absolute;
  7. background: url(../img/default-marker.svg) -10px -5px;
  8. top: 50%;
  9. left: 50%;
  10. z-index: 1;
  11. width: 40px;
  12. height: 50px;
  13. margin-top: -50px;
  14. margin-left: -22px;
  15. cursor: pointer;
  16. }
  17. }

最后,我的控制器处理地图的部分是:

  1. function initialize() {
  2. var initialPosition = loadStoredPosition();
  3.  
  4. var mapOptions = {
  5. zoom: 16,mapTypeId: google.maps.MapTypeId.ROADMAP,disableDefaultUI: true
  6. };
  7.  
  8. map = new google.maps.Map(document.getElementById('chooseLocationMap'),mapOptions);
  9.  
  10. google.maps.event.addListener(map,'center_changed',function () {
  11. updateStoredPosition(map.getCenter());
  12. });
  13.  
  14. var markerDiv = document.createElement('div');
  15. markerDiv.className = 'center-marker';
  16. angular.element(map.getDiv()).append(markerDiv);
  17. }
  18.  
  19. ionic.Platform.ready(initialize);

正如你所看到的,我有两种方法,即loadStoredPosition和updateStoredPosition,它们只是检索并保存一个服务的纬度和经度.

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

问题是,当我离开视图(选择一个位置)然后返回(位置仍然保持与最后一个相同),它看起来像标记没有指向正确的位置,但有点进一步(它总是相同的偏移).

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

编辑:

第一次访问视图时,标记显示在正确的位置.但是,我连续访问的视图,标记没有指向正确的位置,但几个像素.我也应该提到,视图没有被缓存,所以每次都重新创建地图.

最后,我注意到一个好奇的是,我第一次访问这个视图,地图在它可见之后,它做了一个小的弹跳,并稍微扩展!

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()”添加到地图指令中,并将以下内容添加到控制器中.

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

我尝试不同的方法比你问,但它可能值得一试.

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

FYI,我是ngmap的创建者.

猜你在找的Angularjs相关文章