【问题标题】:AngularJS: NgMap - On load map center isn't being respectedAngularJS:NgMap - 加载地图中心没有得到尊重
【发布时间】:2018-10-20 18:30:00
【问题描述】:

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

如果不是通过&lt;map&gt; center 参数或地图初始化时地图选项中的 center 选项,在哪里/如何在加载时设置初始地图位置?

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

【问题讨论】:

    标签: javascript angularjs google-maps ng-map


    【解决方案1】:

    您的代码是正确的,初始地图中心正好在您指定的坐标处,问题似乎出在加载后更改地图中心的 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" 就可以了

    【讨论】:

    • 请问如何动态计算地图?我有一个多边形,我希望显示整个多边形。你知道我该怎么做吗?
    【解决方案2】:

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

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

    【讨论】:

      【解决方案3】:

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

      我解决这个问题的方法是在使地图可见时执行明确的 $scope.$digest

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-07-02
        • 1970-01-01
        • 1970-01-01
        • 2013-12-16
        • 1970-01-01
        • 2017-08-31
        相关资源
        最近更新 更多