google map 自定义矩形框

转自:http://www.playgoogle.com/post/3.html

/*Rectangle类，添加自定义的DIV图层 ====================================================================
*author Karry@derbysoft.com
*继承自GOverlay();
*矩形是在地图上勾勒经纬边界的简单叠加层，其边界已指定
*粗细和颜色，并（可选）可以使用半透明背景颜色.
*/
function Rectangle(point, opt_boldWeight, opt_color, opt_weigth, opt_height, opt_bgColor) {
    this.point_ = point;
    this.boldWeight_ = opt_boldWeight || 1;
    this.color_ = opt_color || "#888888";
    this.weight_ = opt_weigth || "50px";
    this.height_ = opt_height || "30px";
    this.bgColor_ = opt_bgColor || "#FFF";
}
Rectangle.prototype = new GOverlay();
// 创建表示此矩形的 DIV.
Rectangle.prototype.initialize = function(map) {
    // 创建表示我们的矩形的 DIV
    var div = document.createElement("div");
    div.style.border = this.boldWeight_ + "px solid " + this.color_;
    div.style.position = "absolute";
    div.style.background.style = "#FFF";
    div.style.width = this.weight_;
    div.style.height = this.height_;
    div.style.background = this.bgColor_;
      // 与地图信息窗口相同，在地图的最上方
    map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
    $(div).html("<input type=\"button\" value=\"添加\" />")
    this.map_ = map;
    this.div_ = div;
}

//从地图面板删除 DIV
Rectangle.prototype.remove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

// 将我们的数据复制到新的矩形
Rectangle.prototype.copy = function() {
    return new Rectangle(this.point_, this.boldWeight_, this.color_, this.weight_, this.height_, this.bgColor_);
}

// 基于当前投影和缩放级别重新绘制矩形
Rectangle.prototype.redraw = function(force) {
    // We only need to redraw if the coordinate system has changed
    if (!force) return;
      // 现在基于边界的 DIV 坐标放置 DIV
    this.div_.style.left = (this.point_.x - this.boldWeight_) + "px";
    this.div_.style.top = (this.point_.y - this.boldWeight_ - 20) + "px";
}
/*
*Rectangle类结束============================================================================
*/

 

使用方式：

 map.addOverlay(new Rectangle(new GPoint(31.22395859822874,121.47857666015625)));