标签中的角度谷歌地图

Question

首先，让我提一下，我已经看到了很多类似的问题并提出了解决方案，尽管我没有发现任何一个能够真正解决我的问题。也许我没有正确实现某些东西，或者有一个我没有找到/尝试过的解决方案。

我有一个 Angular 应用程序，并且正在使用 git angular-google-maps 指令。

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

这是fiddle to illustrate my problem。

HTML 这是我的 html，这是在一个用 div 构建的 tab 元素中。

<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>

控制器

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.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();
  });

});

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

我确信通过修复 ng map 指令会有更好的选择，但你应该这样做。

Answer 2

我已经设法通过改用不同的指令来解决这个问题，即更简单的外观，尤其是对于街景实现。 ngMap.

我已经成功且轻松地解决了选项卡问题，方法是在我的选项卡“下一个”ng-click 上调用刷新函数，该函数发生在 div 中。控制器也需要进行一些更改，即必须使用推送/事件来在刷新时传递地图详细信息。

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>

控制器

$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