个人中心
gpt4 book ai didi

javascript - 在 Google map 准备就绪之前显示预加载器 - AngularJs

转载 作者：行者123 更新时间：2023-12-03 08:24:22 26 4
gpt4 key购买 nike

如何检查 Google map 是否已准备就绪？我想在加载 Google map 时显示预加载器 block 。

我有工厂:

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
}

以及内部 Controller :

$scope.map = GoogleMaps.getMap();

谢谢

最佳答案

我会在 Google map 上设置一个事件监听器，以便在 map 准备就绪后触发:

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>

关于javascript - 在 Google map 准备就绪之前显示预加载器 - AngularJs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33616306/

26 4 0
文章推荐： javascript - 如何从 javascript include 中使用 php 获取主页的 url？
文章推荐： javascript - 使用 Google 跟踪代码管理器自定义维度
文章推荐： javascript - Promise 总是返回初始值
文章推荐： javascript - 将 JSON 加载到 Google 面积图中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com