AngularJS:NgMap-加载地图中心是'不受尊重

AngularJS: NgMap - On load map center isn't being respected

本文关键字:NgMap- 加载 地图 AngularJS      更新时间:2023-09-26

在这个使用NgMap的AngularJS SPA中,我在数据过滤上设置了映射引脚。在地图的初始加载时,地图以海洋中的某个地方为中心,而不是我在地图对象的中心参数中设置的坐标。我也尝试过在地图初始化中设置这个,但没有成功。

  $scope.$on('mapInitialized', function(event, map) {
    var myLatlng = new google.maps.LatLng(43.6650000, -79);
    var mapOptions = {
      draggable: true,
      zoom: 4,
      center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  });
<map zoom="3" center="[43.6650000,-79]" scrollwheel="false" zoom-to-include-markers="true">
  <marker ng-repeat="site in filteredPins track by $index" position="[{{site.Latitude}},{{site.Longitude}}]" id="{{site.Id}}" title="{{site.SiteName}}"></marker>
</map>

如果不是通过<map>中心参数或地图初始化时地图选项中的中心选项,在加载时如何设置初始地图位置?

Plunkr:http://plnkr.co/edit/u75fJT?p=preview

您的代码是正确的,初始地图中心正好在您指定的坐标处,问题似乎出在加载后更改地图中心的html zoom-to-include-markers="true"

<map zoom="3" center="[43.6650000,-79]" scrollwheel="false" zoom-to-include-markers="true">

删除zoom-to-include-markers="true",它将工作

您提供的经纬度似乎在海洋中。我也试过,在海里给我看。

只需将纬度和经度更改到正确的位置,只需注意,缩放以包括标记="true"在我的地图中运行良好,不会导致地图显示海洋中的坐标。

我遇到了这个问题,因为映射初始化发生在绑定到中心的值为[0,0]时。当实际的中心被填充到控制器中时,地图是不可见的,所以它没有重新居中。

我解决这个问题的方法是做一个显式的$scope$当我使地图可见时的摘要