在谷歌地图准备好之前显示预装程序-AngularJs

Show preloader before Google Maps is ready - AngularJs

本文关键字：程序 -AngularJs 显示 谷歌地图 准备好      更新时间：2023-09-26

如何检查谷歌地图是否准备就绪？我想在加载谷歌地图时显示预装程序块。

我有工厂：

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

感谢

我会在谷歌地图上设置一个事件监听器，以便在地图准备好后启动：

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>

我个人没有使用谷歌地图喷气式飞机。

但是你不能用这个事件来做吗

tilesloaded

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

https://developers.google.com/maps/documentation/javascript/reference
相关文章：