labeledmarker重叠的问题
6 views
Skip to first unread message
zhuang8
Dec 5, 2009, 6:58:38 PM12/5/09
to 谷歌地图 API 论坛
我用labeledmarker生成了多个Marker,由于距离近一些labelmarker部分重叠在一起.我想让它响应click事件,让被遮住
的图标显示在最顶层,用zIndexProcess不管用,请教应该怎么处理.
的图标显示在最顶层,用zIndexProcess不管用,请教应该怎么处理.
gongqf
Dec 8, 2009, 10:03:39 AM12/8/09
to 谷歌地图 API 论坛
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>成都最新楼盘地图 591成都房产网 成都地图</title>
<script src="http://ditu.google.com/maps?
file=api&v=2&key=ABQIAAAA3t6U8VLSVh0kflf03RE2hRR4AhZv8LotTLCeS-
EVpXMBJThh4BQmauwMqzVKVXallIqlBC2A3lgpvw" type="text/javascript"></
script>
<script type="text/javascript">
//<![CDATA[
function aboutText(point,txt)
{
//this.bounds_ = bounds;
this.point_ = point;
this.txt_ = txt;
}
aboutText.prototype = new GOverlay();
aboutText.prototype.initialize = function(map) {
// 创建用于表示该矩形区域的 DIV 元素
var ceng=0;
var div = document.createElement("div");
div.style.border = "1px solid #d59000";
div.onmouseover= function(){ceng=this.style.zIndex;
this.style.zIndex=100;};
div.onmouseout=function(){this.style.zIndex=ceng;};
div.style.color = "#333333";
div.style.backgroundColor = "#fffebe";
div.style.position = "absolute";
//div.appendChild(document.createTextNode(this.txt_));
div.style.textAlign="center";
div.style.padding="3px 3px 3px 3px"
div.style.fontSize = "12px";
div.style.height = "12px";
div.style.cursor = "pointer";
div.style.whiteSpace="nowrap";
var c = map.fromLatLngToDivPixel(this.point_);
div.style.left = c.x+"px";
div.style.top = c.y+"px";
div.innerHTML = this.txt_;
// 我们希望将覆盖物紧贴于地图之上，因此我们把它放置在 Z 序最小的 G_MAP_MAP_PANE 层，
// 事实上，这也是地图本身的 Z 顺序，即在标注的影子之下
map.getPane(G_MAP_MAP_PANE).appendChild(div);
this.map_ = map;
this.div_ = div;
}
aboutText.prototype.remove = function()
{
this.div_.parentNode.removeChild(this.div_);
}
// 将此覆盖物的数据复制到另一个 Rectangle 对象
aboutText.prototype.copy = function()
{
return new Rectangle(this.bounds_, this.txt_);
}// 根据当前的视角和缩放级别重新绘制矩形对象Rectangle.prototype.redraw
aboutText.prototype.redraw = function(force)
{
// 只有当坐标系改变时，我们才需要重绘
if (!force) return;
// 根据当前显示区域的经纬度坐标，计算 DIV 元素的左上角和右下角的像素坐标
var c = this.map_.fromLatLngToDivPixel(this.point_);
// 根据计算得到的坐标放置我们的 DIV 元素
this.div_.style.left = c.x + "px";
this.div_.style.top = c.y + "px";
// this.div_.style.width = "auto";
}
/////////////////////////////////////////////////////////////////////////
function load() {
if (GBrowserIsCompatible()) {
var mx = 30.6502;
var my = 104.0639;
var zo = 12;
var map = new GMap2(document.getElementById("map"));
var cpoint = new GLatLng(mx,my);
map.addControl(new GScaleControl()); //比例图示
map.addControl(new GLargeMapControl()); //缩放图标 GSmallMapControl
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();//允许鼠标双击放大(左键)和缩小(右键)
//map.enableScrollWheelZoom();//允许鼠标滚轮放大和缩小
map.enableContinuousZoom(); //
map.setCenter(cpoint, zo);
var a = new Array(207);
for(i=0;i<207;i++)
{
a[i]=new Array();
}
a[0][0]=542;
a[0][1]=30.64241672;
a[0][2]=104.0938282;
a[0][3]='晶蓝半岛';
a[0][4]='2007-5/23/200705231435256215.html';
a[0][5]='2006-11-19';
a[0][6]='5600元/平方米';
a[0][7]='成都龙湖锦华置业有限公司';
a[0][8]='';
a[1][0]=543;
a[1][1]=30.69136404;
a[1][2]=104.10052299;
a[1][3]='汇融名城';
a[1][4]='2007-5/23/200705231435253606.html';
a[1][5]='2006-12-16';
a[1][6]='0元/平方米';
a[1][7]='四川汇融地产有限公司';
a[1][8]='';
a[2][0]=544;
a[2][1]=30.69416871;
a[2][2]=104.09631729;
a[2][3]='富丽锦城';
a[2][4]='2007-5/23/200705231435253717.html';
a[2][5]='2006-11-25';
a[2][6]='0元/平方米';
a[2][7]='蓝光集团';
a[2][8]='';
a[3][0]=545;
a[3][1]=30.60186693;
a[3][2]=104.12532806;
a[3][3]='蓝谷地';
a[3][4]='2007-5/23/200705231435257972.html';
a[3][5]='2005-6-1';
a[3][6]='4300元/平方米';
a[3][7]='成都融创置地有限公司';
a[3][8]='';
a[4][0]=548;
a[4][1]=30.61974343;
a[4][2]=104.15193558;
a[4][3]='万科魅力之城';
a[4][4]='2007-5/23/200705231435258330.html';
a[4][5]='2006-8-30';
a[4][6]='4000元/平方米';
a[4][7]='成都万科房地产有限公司';
a[4][8]='';
a[5][0]=549;
a[5][1]=30.71291366;
a[5][2]=104.10850525;
a[5][3]='东林城市花园';
a[5][4]='2007-5/23/200705231435257381.html';
a[5][5]='2006-8-10';
a[5][6]='0元/平方米';
a[5][7]='成都永进合能房地产有限公司';
a[5][8]='';
a[6][0]=550;
a[6][1]=30.68154703;
a[6][2]=104.01417732;
a[6][3]='金沙西园';
a[6][4]='2007-5/23/200705231435251408.html';
a[6][5]='2006-9-29';
a[6][6]='5300元/平方米';
a[6][7]='成都天拓置业发展有限公司';
a[6][8]='';
for(i=0;i<7;i++)
{
var point = new GLatLng(a[i][1], a[i][2]);
var b = '楼盘名称：'+a[i][3]+'<br>开 发 商：'+a[i][7]+'<br>楼盘均
价：'+a[i][6]+'<br>开盘日期：'+a[i][5];
var txt = "<a href=/html/"+a[i][4]+" target=_blank
onMouseMove='seashowtip(this.tips,1,300)' onMouseOut='seashowtip
(this.tips,0,300)' tips='"+b+"'>"+a[i][8]+a[i][3]+"</a>";
map.addOverlay(new aboutText(point,txt));
}
}
}
function seashowtip(tips,flag,iwidth)
{
//鼠标移至提示
var my_tips=document.all.mytips;
if(flag){
my_tips.innerHTML=tips;
my_tips.style.display="";
my_tips.style.width=iwidth;
my_tips.style.left=event.clientX+10+document.body.scrollLeft;
my_tips.style.top=event.clientY+10+document.body.scrollTop;
}
else
{
my_tips.style.display="none";
}
}
//]]>
</script>
<style>
a{
text-decoration:none;
color:#333333;
}
body,td
{
font-size:12px;
}
.STYLE1 {color: #FFFFFF}
</style>
</head>
<body onload="load()" onunload="GUnload()" style="margin-left:
0px; margin-top:0px; margin-right:0px; margin-bottom:0px;"><table
width="650" border="0" cellpadding="0" cellspacing="0">
<div id=mytips style=" z-index:101;position:absolute;background-
color:#ffffff;width:121;height:16;border:1px solid
gray;display:none;filter: progid:DXImageTransform.Microsoft.Shadow
(color=#999999,direction=135,strength=3); left:0; top:5; padding:4 4 4
4"></div>
<tr>
<td><div id="map" style="width: 774px; height: 600px; "><img
src="281396857[1].jpg" alt="" width="450" height="338" />
<table style='width:100px;' border='0' cellspacing='0'
cellpadding='0'><tr><td>
</td></tr><tr><td>
</td></tr></table>
<div style="padding:3px 3px 3px 3px; border::1px solid
#d59000; background-color:#fffebe; font-size:12px; color:#000; height:
18px;"></div>
</div></td>
</tr>
</table>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages