如何通过仅在用户滚动到特定部分时调用它来减少 google 映射 API 的点击次数

Question

只有当用户滚动到地图部分而不是点击页面时，有什么方法可以调用 google 地图 API 吗？

下面是我用来在 angularJs 中调用 google 映射 API 的代码：

 function _initializeMap() {
        if(!angular.isDefined(window.google) || !angular.isDefined(window.google.maps)){
            $ocLazyLoad.load("js!https://maps.googleapis.com/maps/api/js?key=Sample_Google_API_Key").then(function() {
                $ocLazyLoad.load("js!"+window.file_base+"./libs/markerclusterer.js").then(function() {
                    initMap();
                });
            });
        }
        else{
            initMap();
        }
    }

Answer 1

路口观测器解决问题：

在这里，我在 _initializeMap 上创建了一个包装器，即 initializeMap 函数，它在用户滚动到具有 id 'map-canvas' 的 div 时调用 _initializeMap，它由 google 映射组成，从而减少 google 映射 API 调用。

 function initializeMap() {

        var options = {
          rootMargin: '200px',
          threshold: 0
        }

        var map = document.getElementById('map-canvas')

        var observer = new IntersectionObserver(
          function(entries, observer) {
            var isIntersecting = typeof entries[0].isIntersecting === 'boolean' ? entries[0].isIntersecting : entries[0].intersectionRatio > 0
            if (isIntersecting) {
              _initializeMap();
              observer.unobserve(map)
            }
          },
          options
        )

        observer.observe(map)

   }