Question

如何查看Google地图是否准备就绪？我想在加载Google地图时显示预加载器块。

我有工厂：

var map = false;
var myLatlng = new google.maps.LatLng(48.6908333333, 9.14055555556);

var myOptions = {
    zoom: 5,
    minZoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggableCursor:'crosshair',
    zoomControl: false,
        center: myLatlng,
        panControl: false,
        streetViewControl: false,
    preserveViewport: true
}

function addMap(mapId) {
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function getMap(mapId) {
    if (!map) addMap(mapId);
        return map;
}

return {
    addMap: addMap,
    getMap: getMap
}

内部控制器：

$scope.map = GoogleMaps.getMap();

谢谢

Answer 1

我会在Google地图上设置一个事件监听器，以便在地图准备好后触发：

function addMap(mapId) {
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListenerOnce(map, "idle", function () {
        scope.$emit('mapInitialized', map);
    });
}

然后在你的启动画面指令中听你的事件

$scope.$on('mapInitialized', function(event, map) {
    // in here you set some variable to actually hide the splash screen
});

带有黑色闪屏的示例代码：

angular
  .module('splashMap', [])
  .directive('map', function() {
      var link = function(scope, element) {

        var el = document.createElement("div");
        el.style.width = "100%";
        el.style.height = "100%";
        element.prepend(el);

        var map = new google.maps.Map(el, {
          center: {
            lat: 48.6908333333,
            lng: 9.14055555556
          },
          zoom: 8

        });

        google.maps.event.addListenerOnce(map, "idle", function() {
          scope.$emit('mapInitialized', map);
        });

      }
      return {
        restrict: 'E',
        link: link
      };

    }

  ).directive('splash', function() {
    var link = function(scope, element) {
      scope.loaded = false;
      scope.$on('mapInitialized', function(e, map) {
        console.log('loaded');
        scope.loaded = true;
        scope.$apply();
      })
    }
    return {
      restrict: 'E',
      link: link,
    }
  });

body,
html,
map {
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
map,
splash {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
splash {
  background-color: #000;
  z-index: 2;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="splashMap">

  <splash ng-hide="loaded"></splash>

  <map></map>

</body>

Answer 2

我个人没有使用google maps jet。

但是你不能通过使用这个事件来做到这一点

tilesloaded

或者本文档中引用的其他事件之一

https://developers.google.com/maps/documentation/javascript/reference

在Google地图准备好之前显示预加载器 - AngularJs

2 个答案: