Question

我使用指令创建迷你地图，给定属性lat和lng，如果这些值发生变化，会自动重新定位地图：

.directive('map', function() {
  return {
    restrict: 'A',
    scope: {
      lat: '@',
      lng: '@'
    },
    link: function(scope, element, attrs){
      var lat = scope.$eval(attrs.lat);
      var lng = scope.$eval(attrs.lng);

      var center = new google.maps.LatLng(lat,lng),

      mapOptions = {
        zoom: 16,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        draggable: true,
        zoomControl: true,
        scrollwheel: false,
        disableDoubleClickZoom: true,
        styles: [...],
        disableDefaultUI: true
      },
      map = new google.maps.Map(element[0], mapOptions),
      marker = new google.maps.Marker({
        position: center,
        map: map,
        icon: {
          url: 'img/marker.png',
          scaledSize: new google.maps.Size(24, 32)
        }
      });

      function update() {
        lat = scope.$eval(attrs.lat);
        lng = scope.$eval(attrs.lng);
        center = new google.maps.LatLng(lat,lng);

        map.setCenter(center);
        marker.setPosition(center);

        console.log('updated');
      }

      attrs.$observe('lat', update);
      attrs.$observe('lng', update);
    }
  };
})

使用它的一个例子是：

<div class="smallMap" lat="49" lng="-1" map></div>

这通常很好用，但在模态中使用它时会出现问题。由于在打开模态之前触发了指令，因此它在DOM中不可见。因此，setCenter不起作用（请参阅http://www.blogbyben.com/2011/12/gotcha-of-day-google-maps-setcenter.html）。

有没有办法在打开模态后强制指令触发，或者在DOM中显示地图之前解决地图居中问题的其他方法？

Answer 1

为了确保正确定位地图，请替换指令中的行：

google.maps.event.addListenerOnce(map, 'idle', function() {
     map.setCenter(center);
     //marker.setPosition(center);
     google.maps.event.trigger(map, 'resize'); 
});

与

array.field[0][2]

假设您的地图是通过AngularJS Modal directive显示的，以下示例演示了如何在模态对话框中显示Google地图

Codepen

Angular Modal中用于Google Map的setCenter

1 个答案: