个人中心
gpt4 book ai didi

javascript - OverlayView 自动定位 Google map V3

转载 作者：行者123 更新时间：2023-11-28 10:16:51 26 4
gpt4 key购买 nike

我创建了一个高度和宽度为 100% 的 div，我想要的是在图钉单击上打开覆盖层，但我想根据屏幕边界定位覆盖层，因此它不会平移该区域以适合 View .

这是我正在使用的代码，但如果我将图钉平移到 map 的 Angular 落，然后单击打开叠加层，它就不起作用。

<html xmlns="http://www.w3.org/1999/xhtml">

        //text overlays
        function PropertyDetailOverlay(pos, txt, cls, map){

            // Now initialize all properties.
            this.pos = pos;
            this.txt_ = txt;
            this.cls_ = cls;
            this.map_ = map;


            // We define a property to hold the image's
            // div. We'll actually create this div
            // upon receipt of the add() method so we'll
            // leave it null for now.
            this.div_ = null;

            // Explicitly call setMap() on this overlay
            this.setMap(map);
        }

        PropertyDetailOverlay.prototype = new google.maps.OverlayView();


        PropertyDetailOverlay.prototype.draw = function () {


            var overlayProjection = this.getProjection();

            // Retrieve the southwest and northeast coordinates of this overlay
            // in latlngs and convert them to pixels coordinates.
            // We'll use these coordinates to resize the DIV.
            var position = overlayProjection.fromLatLngToDivPixel(this.pos);

            var div = this.div_;


            // Now position our DIV based on the DIV coordinates of our bounds


            var mapWidth = map.getDiv().offsetWidth;
            var mapHeight = map.getDiv().offsetHeight;

            var boxWidth = 200;
            var boxHeight = 40;

            var left = 0;
            var top = 0;
            var xStart = position.x - boxWidth / 2;
            var xEnd = position.x + boxWidth / 2;
            var yStart = position.y;
            var yEnd = position.y + boxHeight;

            if (xStart < 0)
                left = 0;
            else if (xEnd > mapWidth)
                left = mapWidth - boxWidth;
            else
                left = xStart;


            if (yEnd > mapHeight)
                top = mapHeight - 2 * boxHeight;
            else
                top = position.y;

            div.style.left = left + 'px';
            div.style.top = top + 'px';



        }


        PropertyDetailOverlay.prototype.onAdd = function () {

            google.maps.event.addListener(map, 'bounds_changed', function () {

                txt.bounds_ = map.getBounds();
                txt.draw();

            });

            // Note: an overlay's receipt of onAdd() indicates that
            // the map's panes are now available for attaching
            // the overlay to the map via the DOM.

            // Create the DIV and set some basic attributes.
            var div = document.createElement('DIV');
            div.className = this.cls_;

            div.innerHTML = this.txt_;

            // Set the overlay's div_ property to this DIV
            this.div_ = div;
            var overlayProjection = this.getProjection();
            var position = overlayProjection.fromLatLngToDivPixel(this.pos);
            div.style.left = position.x + 'px';
            div.style.top = position.y + 'px';
            // We add an overlay to a map via one of the map's panes.

            var panes = this.getPanes();
            panes.floatPane.appendChild(div);
            this.toggle();
        }

       //Optional: helper methods for removing and toggling the text overlay.  
        PropertyDetailOverlay.prototype.onRemove = function(){
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
        }
        PropertyDetailOverlay.prototype.hide = function(){
            if (this.div_) {
                this.div_.style.visibility = "hidden";
            }
        }

        PropertyDetailOverlay.prototype.show = function(){
            if (this.div_) {
                this.div_.style.visibility = "visible";
            }
        }

        PropertyDetailOverlay.prototype.toggle = function(){
            if (this.div_) {
                if (this.div_.style.visibility == "hidden") {
                    this.show();
                }
                else {
                    this.hide();
                }
            }
        }

        PropertyDetailOverlay.prototype.toggleDOM = function(){
            if (this.getMap()) {
                this.setMap(null);
            }
            else {
                this.setMap(this.map_);
            }
        }




        var map;
        var _prevOverlay;

        function init(){
            var latlng = new google.maps.LatLng(37.9069, -122.0792);
            var myOptions = {
                zoom: 4,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "Hello World!"
            });


            AddMarker(latlng, marker);






        }
        var added = false;

        function AddMarker(latlng,marker) {
            customTxt = "<div style='width:200px;height:40' >60th Ave, Mercer Island</div>";
            txt = new PropertyDetailOverlay(latlng, customTxt, "customBox", map);



            google.maps.event.addListener(marker, 'click', function () {
                if (_prevOverlay != null && _prevOverlay != txt)
                    _prevOverlay.toggle();
                txt.toggle();
                _prevOverlay = txt;

            });

            google.maps.event.addListener(map, 'click', function (event) {
                if (_prevOverlay != null)
                    _prevOverlay.hide();
            });

            google.maps.event.addListener(map, 'bounds_changed', function (event) {
                if (_prevOverlay != null)
                    _prevOverlay.hide();
            });



        }
    </script>
    <style>
        .customBox 
        {
            padding:5px;
            background: #0866C3;
            border: 1px solid white;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;

        }


    </style>

     <style type="text/css">
    html
    {
        height: 100%;
    }
    body
    {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
</head>
<body onload="init()">
    <div id="map" style="height:100%;width:100%">
    </div>
</body>

问候

最佳答案

http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html它在一种条件下工作得很好。如果 window 必须靠近 Angular 落，那就很糟糕了。但它有一个简单的代码，您可以对其进行编辑。

关于javascript - OverlayView 自动定位 Google map V3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6424567/

26 4 0
文章推荐： javascript - 嵌入式谷歌地图在调整窗口大小之前不显示完整 map
文章推荐： css - 中心下拉导航菜单
文章推荐： html - 如何将未指定宽度的 div 居中？
文章推荐： css -
行者123
个人简介

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

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