个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 14:30:37 29 4
gpt4 key购买 nike

我正在开发一个谷歌地图项目。我们使用自定义叠加层作为弹出标记。弹出窗口应该很大。因此，我想在单击标记时平移 map ，使标记距视口(viewport)底部约 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

最佳答案

简单的解决方案1:
如果您不介意将标记水平居中对齐:首先将 map 中心设置为标记的位置，然后将 map 平移 map 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:
如果您不想将标记水平居中对齐:首先将 map 中心设置为标记的纬度和 map 的中心经度，然后将 map 平移 map 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>

希望这会有所帮助!

关于javascript - 谷歌地图点击标记平移到屏幕底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37864470/

29 4 0
文章推荐： javascript - 为什么浏览器执行内容类型为 json 的 <script> ？
文章推荐： git - VSTS Online无法通过ssh克隆大型仓库吗？
文章推荐： grails - grails 3.0.x如何使用不同的文件后缀创建自定义 war 名称
文章推荐： javascript - 使用 jQuery 使用 Next Previous 按钮显示隐藏情侣 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com