当前位置: 代码迷 >> Web前端 >> google 地图 自定义矩形框
  详细解决方案

google 地图 自定义矩形框

热度:118   发布时间:2012-10-26 10:30:59.0
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)));

  相关解决方案