我如何使用 Angular 指令强制 Google 地图加载到我的 Angular 应用程序中

Question

我的 Google 地图有 80% 的时间不显示。在我的 Angular 视图中填充其余数据时，我的地图似乎还没有完全呈现。

如何强制加载我的地图？

我做了一些研究，并且在相关问题上找到了这个答案，但我不确定如何以及是否可以实现这样的事情：

This was bothering me for a while with GMaps v3. I found a way to do it like this:
google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});
The "idle" event is triggered when the map goes to idle state - everything loaded (or failed to load). I found it to be more reliable then tilesloaded/bounds_changed and using addListenerOnce method the code in the closure is executed the first time "idle" is fired and then the event is detached.

Link: How can I check whether Google Maps is fully loaded?

这是我当前的设置：

1.我的 Google 地图 API link 和密钥在我的 index.html 文件中：

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXX"></script>

2。我使用以下作为我的 Angular 指令：

'use strict';

angular.module('portalDashboardApp')
  .directive('ogGoogleMap', function ($http, $q) {
      return {
          restrict: 'E',
          scope: {
              twitter: '=',
              instagram: '='
          },
          template: '<div id="gmaps"></div>',
          replace: true,
          link: function (scope, element, attrs) {

              var map, infoWindow;
              var markers = [];

              // map config
              var mapOptions = {
                  center: new google.maps.LatLng(-0.013026, 21.333860),
                  zoom: 3,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };

              // init the map
              function initMap() {
                  if (map === void 0) {
                      map = new google.maps.Map(element[0], mapOptions);
                  }
              }

              // place a marker
              function setMarker(map, position, title, content, icon) {

                  if (icon === 'IN') {
                      icon = 'images/instagramMarker.png';
                  }
                  else {
                      icon = 'images/twitterMarker.png';
                  }

                  var marker;
                  var markerOptions = {
                      position: position,
                      map: map,
                      title: title,
                      icon: icon
                  };

                  marker = new google.maps.Marker(markerOptions);
                  markers.push(marker); // add marker to array

                  google.maps.event.addListener(marker, 'click', function () {
                      // close window if not undefined
                      if (infoWindow !== void 0) {
                          infoWindow.close();
                      }
                      // create new window
                      var infoWindowOptions = {
                          content: content
                      };
                      infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                      infoWindow.open(map, marker);
                  });
              }

              function deleteCurrentMarkers() {
                  for (var i = 0; i < markers.length; i++) {
                      markers[i].setMap(null);
                  }
                  markers = [];
              }

              scope.$watch('instagram', function () {
                  deleteCurrentMarkers();
                  populateMarkers(scope.twitter, 'TW');
                  populateMarkers(scope.instagram, 'IN');
              });

              // show the map and place some markers
              initMap();

              function populateMarkers(locationArray, type) {

                  angular.forEach(locationArray, function (location) {

                      setMarker(map, new google.maps.LatLng(location[0], location[1]), '', '', type);

                  });

              }

          }
      };
  });

3。我使用以下简单方法在我的 Angular 控制器中分配我的地图数据：

首先我检索我的数据：

function pullSocialData() {

    SocialMediaUserService.getKeywordProfileID().then(function (keywordProfileID) {

        GetFusionDataService.getItems(getRequestURL(keywordProfileID))
          .success(function (data) {

              formatDataAccordingToLocation(data);

          })
          .error(function (error, status) {
              handleDataRetrievalError(error, status);
          });

    });
}

我分配我的数据：

function formatDataAccordingToLocation(data) {
    $scope.twitterLocations = data.lat_longs_twitter;
    $scope.instagramLocations = data.lat_longs_instagram;
}

这是我在 API 中的数据：

lat_longs_twitter: [
    [
    -25.77109,
    28.09264
    ],
    [
    -26.1078272,
    28.2229014
    ]
]

4.我的 HTML 地图 div:

<div ng-show="!demographics.showDemographicsGraph">
    <og-google-map twitter="twitterLocations" instagram="instagramLocations"></og-google-map>
</div>

当我的地图正确加载时，它看起来像这样：

当加载不正确时，它看起来像这样：

提前致谢！

Answer 1

在您的指令 link 函数中，尝试将 initMap 移动到地图 idle 回调中：

google.maps.event.addListenerOnce(map, 'idle', function(){ 
   // show the map and place some markers
   initMap();
});

Answer 2

为了加载我的地图，我在初始化地图之前添加了一些验证来检查我的数据是否已返回。我还添加了一个 timeOut 作为衡量标准，让地图有更多时间进行渲染。

我在 Angular 指令中做了以下更改：

scope.$watch('instagram', function () {
  if (scope.twitter != undefined || scope.instagram != undefined) {
      initMap();
      setTimeout(function () {
          deleteCurrentMarkers();
          populateMarkers(scope.twitter, 'TW');
          populateMarkers(scope.instagram, 'IN');
      }, 3000);
  }
});

我如何使用 Angular 指令强制 Google 地图加载到我的 Angular 应用程序中

How can I force Google Maps to load in my Angular app using an Angular Directive

javascript

google-maps

angularjs

angular-directive