如何通过仅在用户滚动到特定部分时调用它来减少谷歌地图 API 命中数

Posted 2023-02-23

【中文标题】如何通过仅在用户滚动到特定部分时调用它来减少谷歌地图 API 命中数

【英文标题】：How to decrease the google maps API hit count by calling it only when user scrolls to the particular section

【发布时间】：2021-04-19 13:07:17

【问题描述】：

有什么方法可以让我只在用户滚动到地图部分而不是在页面点击时调用谷歌地图 API？

以下是我在 angularJs 中调用谷歌地图 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();
        
    

【问题讨论】：

也许您可以利用 Intersection Observer 仅在特定部分进入视口时触发请求 - [link]developer.mozilla.org/en-US/docs/Web/API/…

【参考方案1】：

路口观察器解决问题：

在这里，我在 _initializeMap 上创建了一个包装器，即在用户滚动到具有 id 'map-canvas' 的 div 时调用 _initializeMap 的 _initializeMap 函数，该 div 由谷歌地图组成，从而减少了谷歌地图 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)