AngularJS:NgMap - 加载地图中心未被尊重

时间:2015-11-24 14:18:49

标签: javascript angularjs google-maps ng-map

在使用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

3 个答案:

答案 0 :(得分:2)

您的代码是正确的,初始地图中心正好在您指定的坐标处,问题似乎是在加载后更改地图中心的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",它会起作用

答案 1 :(得分:0)

您提供的经度和经度似乎都在海洋中。我也尝试过并在海洋中展示我。 :)

只需将纬度和经度更改为正确的位置,只需注意,zoom-to-include-markers =“true”在我的工作中运行良好,它不会导致地图显示海洋中的坐标。

答案 2 :(得分:0)

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

我解决问题的方法是在显示地图时执行显式的$ scope。$ digest