javascript 获取谷歌地图的可见部分，并将中心主标记设置为可见部分的中心

Posted 2021-05-04

function getVisibleHeight($element) {    
    var $el = $element,
        scrollTop = $(this).scrollTop(),
        scrollBot = scrollTop + $(this).height(),
        elTop = $el.offset().top,
        elBottom = elTop + $el.outerHeight(),
        visibleTop = elTop < scrollTop ? scrollTop : elTop,
        visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    return visibleBottom - visibleTop;
}

function getPixelOffsetMap(map, marker) {
    // Calculate marker position in pixels form upper left corner
    var scale = Math.pow(2, map.getZoom());
    var nw = new google.maps.LatLng(
        map.getBounds().getNorthEast().lat(),
        map.getBounds().getSouthWest().lng()
    );
    var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
    var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
    var pixelOffset = new google.maps.Point(
        Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
        Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
    );
    return pixelOffset;
};

    google.maps.event.addListener(map, "idle", function() { 
        var pixelOffsetMarker = getPixelOffsetMap(map, mainMarker);
        var mapVisibleHeight = getVisibleHeight($('#' + mapElementId));
        
//        console.log(pixelOffset);
        
        console.log(mapVisibleHeight);
        console.log(pixelOffsetMarker);
        
        if(pixelOffsetMarker.y > mapVisibleHeight && mapVisibleHeight > 0) {
        	console.log('qqq');
            map.panBy(Math.abs(pixelOffsetMarker.x),
                    Math.abs(mapVisibleHeight / 2));
        }
        
        // Do the pan
        map.panBy(Math.abs(pixelOffset.x - mapOfset.left),
                 Math.abs(pixelOffset.y - mapOfset.top));
//        
//        google.maps.event.removeListener(listener); 
    });