Question

首先，我要提一下，我已经看到很多像这样的问题和建议的解决方案，虽然我没有找到任何实际解决我的问题的问题。也许我没有正确实现某些东西，或者有一个我没有找到/试过的解决方案。

我有一个角度应用程序，并使用git angular-google-maps指令。

我的地图位于标签视图中，仅在向导/标签显示第二个div元素时显示。我意识到这是一个google api问题，由于元素被隐藏，当div最终显示时，地图不会被初始化。它只在我调整页面大小或打开控制台时按F12（在chrome中）开始显示/工作。

这是fiddle to illustrate my problem。

HTML 这是我的html，它位于使用div构建的制表符元素中。

<div class="row">
   <div class="hide-map">
      <ui-gmap-google-map
         id="map-canvas"
         center="map.center"
         zoom="map.zoom"
         draggable="true"
         events="map.events">
      </ui-gmap-google-map>
   </div>
   <div class="col-sm-12">
   <div id="pano" style=" height: 400px;">
</div>

CONTROLLER

angular.module('ngPortalApp')
  .controller('myCtrl', function ($scope, $log, googleMapService, uiGmapGoogleMapApi) {
    $log.log('myCtrl');

    Init();

    function Init() {
      $scope.data = {};

      googleMapService.getData().then(function (result) {

        $scope.latc = result.lat;
        $scope.longc = result.lng;

        console.log("controller got data!");
        console.log(result);

        angular.extend($scope, {
          map: {
            center: {
              latitude: $scope.latc,
              longitude: $scope.longc
            },
            options: {
              maxZoom: 17,
              minZoom: 17
            },
            zoom: 17,
            events: {
              showMap: function (map){
                map.refresh();
              },
              projection_changed: function (map, eventName, originalEventArgs) {
                var Location = new google.maps.LatLng($scope.map.center.latitude, $scope.map.center.longitude);
                var panoramaOptions = {
                  position: Location,
                  pov: {
                    heading: 30,
                    pitch: 5,
                  }
                };

                var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
                map.setStreetView(panorama);



              }
            }
          }


        });
      })

    }

  });

对此有何解决方案/建议？我已经尝试过使用ng-if设置和检查activetab范围值，我已经绑定了ng-class，我在地图范围内尝试了各种事件，但我不确定如何实际调用map事件，如map.refresh （）应该工作。提前感谢您解决我的小提琴的任何帮助：）

Answer 1

以你的小提琴为例。

问题是当地图为refreshed时，未设置long和lat。

作为ng map指令中的函数执行的refresh参数需要一个包含longitude和latitude的对象。

如果不更改ng map指令，我可以想到触发刷新的唯一方法是创建一个返回唯一值的函数（使用前一个long和lat）。

在这个例子中，我在上次更新地图时使用日期时间值来保持（只是为了使它与之前的值不同）

http://plnkr.co/edit/sIIWZcsa7WrCHuhHp3XE?p=preview

angular.module('demo', ['google-maps'])

.factory('demo', function($timeout, $q) {

})

.controller('MainCtrl', function($scope, demo) {

  $scope.activeTab = 1;
  $scope.lastUpdated = new Date();

  $scope.map = {};

  $scope.map.zoom = 4;

  // default center point
  $scope.map.center = {
      latitude: 45,
      longitude: -73,
      refresh:0
  };

  $scope.refresh = function(){
      return  {
        lastUpdated : $scope.lastUpdated,
        latitude : $scope.map.center.latitude,
        longitude : $scope.map.center.longitude
      }
  },

  $scope.$watch("activeTab",function(v) {
    if (v==2) $scope.lastUpdated = new Date();
  });

});

在这种情况下，每次选项卡== 2时都会刷新地图。您可以将其更改为仅一次。

我确定通过修复ng map指令可以提供更好的选择，但这应该是你。

Answer 2

我设法通过切换到使用不同的指令来解决这个问题，即更简单的看似，特别是对于街景实现。 ngMap。

我通过在我的标签“下一次”ng-click上调用刷新功能成功并轻松地解决了标签问题。控制器也需要进行一些更改，即必须使用推/事件才能在刷新时传递地图细节。

<强> HTML

<map zoom="20" center={{coords}} >
   <marker position={{coords}}>
   </marker>
   <street-view-panorama
      click-to-go="false"
      disable-default-u-i="false"
      disable-double-click-zoom="false"
      position={{coords}}
      pov="{heading:90, pitch: 0}"
      scrollwheel="false"
      enable-close-button="true"
      visible="true">
  </street-view-panorama>
</map>

<强> CONTROLLER

$scope.reRenderMap = function() {
      $timeout(function(){
        angular.forEach($scope.maps, function(index) {
          google.maps.event.trigger(index, 'resize');
        });
      }, 200);
    }
    $scope.maps = [];
    $scope.$on('mapInitialized', function(evt, evtMap) {
      $scope.maps.push(evtMap);
    });

如果有人遇到同样的问题，请参阅以下小提琴和叠加：

Stack Solution

Fiddle

标签中的angular-google-map

2 个答案: