各位大神，帮忙看看我这代码里有什么错误？为什么不显示呢？

huihuiworf 2012-03-01 05:42:20

我想在百度地图的当前视窗画个跟视窗一样大小的矩形，代码如下，请各位大神帮我看看问题出在哪儿了、



<!DOCTYPE html>  

<html>  

<head>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>百度map</title>  

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>  

</head>  

  

<body>  

<div id="container" style="width:400px; height:300px;float:left; "></div>  

<script type="text/javascript">



    function SquareOverlay(bounds, opt_weight, opt_color) {

        this._bounds = bounds;

        this._weight = opt_weight || 2;

        this._color = opt_color || "#FF0000";

    }



    // 继承API的BMap.Overlay   

    SquareOverlay.prototype = new BMap.Overlay();



    // 实现初始化方法

    SquareOverlay.prototype.initialize = function (map) {  



        // 创建div元素，作为自定义覆盖物的容器     

        var div = document.createElement("div");

        div.style.border = this._weight + "px solid " + this._color;

        div.style.position = "absolute";



        // 将div添加到覆盖物容器中   

        map.getPanes().markerPane.appendChild(div);



        // 保存div实例 

        this._map = map;  

        this._div = div;



        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、   

        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。   

        //return div;

    }



    // 从地图面板删除 DIV

    SquareOverlay.prototype.remove = function () {

        this._div.parentNode.removeChild(this._div);

    }



    // 将我们的数据复制到新的矩形

    SquareOverlay.prototype.copy = function () {

        return new Rectangle(this._bounds, this._weight, this._color,

                           this._backgroundColor, this._opacity);

    }



    // 实现绘制方法

    SquareOverlay.prototype.draw = function () {



        // 根据地理坐标转换为像素坐标，并设置给容器   

        var position1 = this._map.pointToOverlayPixel(this._bounds.getSouthWest());

        var position2 = this._map.pointToOverlayPixel(this._bounds.getNorthEast());

        this._div.style.width = Math.abs(position2.x - position1.x) + "px";

        this._div.style.height = Math.abs(position2.y - position2.y) + "px";

        this._div.style.left = (Math.min(position2.x - position1.x) - this._width) + "px";

        this._div.style.top = (Math.min(position2.y - position1.y) - this._width) + "px";



    }



    // 实现显示方法   

    SquareOverlay.prototype.show = function () {

        if (this._div) {

            this._div.style.display = "";

        }

    }



    // 实现隐藏方法   

    SquareOverlay.prototype.hide = function () {

        if (this._div) {

            this._div.style.display = "none";

        }

    }



    // 添加自定义方法   

    SquareOverlay.prototype.toggle = function () {

        if (this._div) {

            if (this._div.style.display == "") {

                this.hide();

            }

            else {

                this.show();

            }

        }

    }



    // 初始化地图   

    var map = new BMap.Map("container");

    var point = new BMap.Point(116.404, 39.915);

    map.centerAndZoom(point, 11);



    // 添加自定义覆盖物

    var bounds = map.getBounds();

    //var mySquare = new SquareOverlay(map.getBounds(), 400, 300, "red");



    var southWest = bounds.getSouthWest();

    var northEast = bounds.getNorthEast();

    var lngDelta = northEast.lng - southWest.lng;

    var latDelta = northEast.lat - southWest.lat;

    var rectBounds = new GLatLngBounds(

            new GLatLng(southWest.lat + latDelta,

                        southWest.lng + lngDelta),

            new GLatLng(northEast.lat - latDelta,

                        northEast.lng - lngDelta));



    map.addOverlay(new SquareOverlay(rectBounds));



    map.enableScrollWheelZoom();                  // 开启鼠标滚轮缩放

    map.enableKeyboard();                         // 开启键盘控制

    map.enableContinuousZoom();                   // 开启连续缩放效果

    map.enableInertialDragging();                 // 开启惯性拖拽效果

    

</script>  

</body>  

</html>

...全文

88 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

血痕123456 2012-03-02

打赏
举报

代码好长，建议你把css提出来写，这个能够保证你的程序看起来比较舒服，易懂
但是问题还是没有找出来······

三石-gary 2012-03-02

打赏
举报

运行了一下。。报方法undefined
var rectBounds = new GLatLngBounds(
new GLatLng(southWest.lat + latDelta,
southWest.lng + lngDelta),
new GLatLng(northEast.lat - latDelta,
northEast.lng - lngDelta));