Question

我创建了一个100％高度和宽度的div我想要的是在图钉点击上打开叠加但我想根据屏幕边界定位叠加，所以它不会平移区域以适应视图

这是我正在使用的代码，但如果我将图钉平移到地图的角落，然后点击打开叠加层，它就无效。

<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>

此致

Answer 1

http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html 它可以在一种情况下正常工作。如果窗户必须接近角落，那就太糟糕了。但它有一个简单的代码，你可以编辑它。

OverlayView自动定位Google Map V3

1 个答案: