Question

我正在开发谷歌地图项目。我们使用自定义叠加作为标记弹出。弹出窗口有点大。所以我想，在点击标记时，让地图平移，这样标记距离视口底部大约50个像素，以便为弹出窗口留出空间。

目前，我只是将其平移到标记的纬度/长度。

google.maps.event.addDomListener(div, "click", function(e) {
            var x = e.x,
                y = $(div).offset(),
                windowHeight = $(window).height(),
                windowWidth = $(window).width();
            if(!$(div).find('.ryan').hasClass("scaleUp")){
                map.panTo({lat: args.location.lat, lng: args.location.lng})
                var top = $(div).offset().top, mapHeight = $('#content-wrapper').height();



                $(div).append(buildBubble(self.getHcpCount())).css("z-index", markerZindex++)
                var bubble = $(this).find('.ryan');
                var windowPercentage = .5;
                bubble.css({
                    "width": windowWidth * windowPercentage,
                    "height": windowHeight * windowPercentage,
                    "top": 0,
                    "left": 0,
                    "margin-top": -1 * windowWidth * windowPercentage / 2,
                    "margin-left": -1 * windowWidth * windowPercentage / 2 + $(this).width() / 2
                });

                bubble.find('.bubble-body').css({
                    "height": bubble.height() - bubble.find('.bubble-header').height()
                });

                bubble.find('.bubble-section').css({
                    "width": (bubble.width() /*- arrowLeft - arrowRight*/) / 2 - 5
                });

                bubble.find('.hcps-wrapper').css({
                    "width": (bubble.width() /*- arrowLeft - arrowRight*/)
                })

                attachBubbleHandler($(div));

                map.setOptions({disableDoubleClickZoom: true });
            }else{
                map.setOptions({disableDoubleClickZoom: false });
            }   
            $(div).find('.ryan').toggleClass("scaleUp", function(){
                if(!$(this).hasClass('scaleUp')){
                    $(this).unbind().remove();
                }
            });
        });

        //this handles the zIndex problem with clusters being over marker bubbles
        this.getPanes().floatPane.appendChild(div);

    }

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

    //LOCATION OF THE TOP AND LEFT POINTS OF THE BUBBLE
    if (point) {
        div.style.left = (point.x - 20) + 'px';
        div.style.top = (point.y) + 'px';
    }

};//END DRAW MARKER

Answer 1

简单的解决方案1：
如果您不介意将标记水平对齐中心：首先将地图中心设置为标记的位置，然后按地图的div高度的一半减去底部的偏移量来平移地图：

marker.addListener('click', function(){
  var divHeightOfTheMap = document.getElementById('map').clientHeight;
  var offSetFromBottom = 50;
  map.setCenter(marker.getPosition());
  map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});

简单的解决方案2：
如果您不想将标记水平对齐中心：首先将地图中心设置为标记的纬度和地图的中心经度，然后按地图的div高度的一半减去底部的偏移量来平移地图：

marker.addListener('click', function(){
  var divHeightOfTheMap = document.getElementById('map').clientHeight;
  var offSetFromBottom = 50;
  map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), map.getCenter().lng()));
  map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});

解决方案3：

使用空叠加层计算像素位置：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Pan to bottom</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        var marker;
        var map;
        var overlay;
        divOverlay.prototype = new google.maps.OverlayView();
        function initMap() {
            var mLatLng = {lat: 40.758984, lng: -73.985131};
            map = new google.maps.Map(document.getElementById('map'), {
              zoom: 15,
              center: mLatLng
            });

            var marker = new google.maps.Marker({
              position: mLatLng,
              map: map
            });

            overlay = new divOverlay(map, marker);
            overlay.setMap(map);

            marker.addListener('click', function(){
                overlay.panMarkerToBottom(50, true); // (Offset from bottom, want horizontally center?)
            });
        }
        function divOverlay(map, marker) {
            this.bounds_ = map.getBounds();
            this.map_ = map;
            this.div_ = null;
            this.marker_ = marker;
        }
        divOverlay.prototype.onAdd = function() {
            this.div_ = document.createElement('div');
            this.getPanes().overlayLayer.appendChild(this.div_);
        };
        divOverlay.prototype.onRemove = function() {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
        };      
        divOverlay.prototype.draw = function() {
        };

        divOverlay.prototype.panMarkerToBottom = function(offSetFromBottom, isCenter) {
            if (offSetFromBottom){
                var overlayProjection = this.getProjection();
                var mPos = overlayProjection.fromLatLngToContainerPixel(this.marker_.getPosition());
                var mapDiv = this.map_.getDiv();
                var mapWidth = mapDiv.offsetWidth;
                var mapHeight = mapDiv.offsetHeight;
                var panX = 0;
                if (isCenter) {
                    panX = -(mapWidth / 2 - mPos.x);
                }; 
                var panY = -(mapHeight - mPos.y - offSetFromBottom);
                this.map_.panBy(panX , panY);
            }
        };      
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

我希望这有帮助！

谷歌地图点击标记平移到屏幕底部

1 个答案: