如何减少谷歌地图API点击次数，只在用户滚动到特定部分时调用它

Question

有没有什么方法可以让我只在用户滚动到地图部分而不是页面点击时调用谷歌地图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();
}
}

Answer 1

交叉口观测器解决了问题：

在这里，我在_initializeMap上创建了一个包装器，即initializeMap函数，该函数在用户滚动到id为"map-canvas"的div时调用_initializeTap，该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)
}