网站地图    收藏   

子栏目

主页 > 前端 > javascript >

百度地图API自定义覆盖物点击分别弹出信息窗口

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

[导读] 因为工作需我们需要把百度地图自定义一些东西，如房产网站就要有楼盘名了，我们点击时就弹出信息窗口，然后调用此楼盘的相关信息，下面我来介绍具体地。...

因为工作需要，网上找来找去都没有现成的，自己的原生JS又不好，就将网上找的循环多个标注代码改了改，还不赖，去掉原来的标注,label，直接用我想用的自定义覆盖物和信息窗口歹徒，虽然代码零散，但至少目的达到了。

今天分享刚用上的百度地图API示例：根据后端输出的数据，动态在地图上循环添加多个自定义覆盖物，并且点击覆盖物能弹出对应的信息窗口。

我想需要这个的应该不少，希望有需要的朋友都能用得上。

演示效果图：

本示例用的是1.2版本的API,下面是全部代码，注意CSS背景图的路径。

附上实例中的2个图片：

演示地址：因为WP的固定链接，FTP上传的文件都没法访问，暂时没法演示。可以自行复制下面的完整代码另存为html静态文件看效果。

 代码如下 复制代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=CB2ede775afeb6e413abd40261396a69"></script>
<title>循环添加多个自定义覆盖物，点击弹出对应信息窗口</title>
 
<style type="text/css">
*{margin:0;
padding:0;
}
.q_MapInfo{
overflow:hidden;
}
.q_MapInfo h4{
line-height:25px;
color:#2b2b2b;
border-bottom:1px solid #999;
font-size:12px;
margin-bottom:5px;
font-weight:normal;
}
.q_infos{
overflow:hidden;
}
.q_infos:after{
display:block;
visibility:hidden;
font-size:0;
height:0;
content:"";
clear:both;
}
*html .q_infos{zoom:1;}
*html+first-child .q_infos{zoom:1;}
 
.q_infoLeft{
float:left;
width:200px;
font-size:12px;
line-height:30px;
}
.q_infoLeft p{
line-height:30px;
}
.q_infoLeft a{
text-decoration:none;
color:#2b2b2b;
}
 
.q_infoLeft a:hover{
color:red;
}
.q_infoRight{
float:right;
width:100px;
height:75px;
}
.q_infoRight img{
display:block;
width:100px;
height:75px;
overflow:hidden;
}
.q_infoBot{
border-top:1px solid #999;
}
.q_infoBot p{
line-height:30px;
}
.q_infoBot em{
font-size:24px;
font-style:normal;
color:green;
}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var mp = new BMap.Map("allmap");
mp.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
mp.addControl(new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); //右下角，打开
mp.addControl(new BMap.ScaleControl()); // 添加默认比例尺控件
mp.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})); // 左下
mp.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
mp.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角，仅包含平移和缩放按钮
var point=new BMap.Point(110.803154,19.559595);
mp.centerAndZoom(point, 15);
mp.enableScrollWheelZoom();
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText){
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.background = "url(blue.gif) repeat-x 0 -33px";
div.style.color = "white";
div.style.height = "21px";
div.style.padding = "2px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px";
div.style.cursor = "pointer";
var span = this._span = document.createElement("span");
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that = this;
 
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(blue.gif) no-repeat -8px -100px";
arrow.style.position = "absolute";
arrow.style.width = "30px";
arrow.style.height = "12px";
arrow.style.top = "19px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
var leftBar = this._leftBar = document.createElement("div");
leftBar.style.background = "url(blue.gif) no-repeat -12px -2px";
leftBar.style.position = "absolute";
leftBar.style.width = "11px";
leftBar.style.height = "24px";
leftBar.style.top = "0px";
leftBar.style.left = "-10px";
leftBar.style.overflow = "hidden";
div.appendChild(leftBar);
 
var rightBar = this._rightBar = document.createElement("div");
rightBar.style.background = "url(blue.gif) no-repeat -22px -2px";
rightBar.style.position = "absolute";
rightBar.style.width = "11px";
rightBar.style.height = "24px";
rightBar.style.top = "0px";
rightBar.style.right = "-10px";
rightBar.style.overflow = "hidden";
div.appendChild(rightBar);
div.onmouseover = function(){
this.style.background = "url(blue2.gif) repeat-x 0 -33px";
this.getElementsByTagName("span")[0].innerHTML = that._overText;
arrow.style.background = "url(blue2.gif) no-repeat -8px -100px";
leftBar.style.background = "url(blue2.gif) no-repeat -12px -2px";
rightBar.style.background = "url(blue2.gif) no-repeat -22px -2px";
}
 
div.onmouseout = function(){
this.style.background = "url(blue.gif) repeat-x 0 -33px";
this.getElementsByTagName("span")[0].innerHTML = that._text;
arrow.style.background = "url(blue.gif) no-repeat -8px -100px";
leftBar.style.background = "url(blue.gif) no-repeat -12px -2px";
rightBar.style.background = "url(blue.gif) no-repeat -22px -2px";
}
 
mp.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
ComplexCustomOverlay.prototype.addEventListener = function(event,fun){
this._div['on'+event] = fun;
}
 
 
//下面开始尝试数组（这是后台输出的数据，这里只能静态写一些做演示。）
var markerArr = [{title:"绿岛",content:'<div style="float:left;width:120px;">起价：6800 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜开发区文清大道北侧（椰子大观园对面）</span> <br><br><a href="/House-show?id=8">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510cbb671095a.jpg" wdith="80px" height="75px"></div>',point:'110.804978|19.558234',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"中南.森海湾",content:'<div style="float:left;width:120px;">起价：7600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：海南省文昌市高隆湾旅游大道</span> <br><br><a href="/House-show?id=12">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201301/s_51089eb396bdb.jpg" wdith="80px" height="75px"></div>',point:'110.829448|19.548253',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"天御湾",content:'<div style="float:left;width:120px;">起价：4200 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文航路</span> <br><br><a href="/House-show?id=13">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201301/s_51089bb5d5a2e.jpg" wdith="80px" height="75px"></div>',point:'|',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"观澜雅苑",content:'<div style="float:left;width:120px;">起价：5000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜开发区文清大道</span> <br><br><a href="/House-show?id=23">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201301/s_51089f4bdf251.jpg" wdith="80px" height="75px"></div>',point:'110.805984|19.555305',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海拓澜湾",content:'<div style="float:left;width:120px;">起价：10800 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市高隆湾旅游大道</span> <br><br><a href="/House-show?id=15">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201301/s_51089591df37b.jpg" wdith="80px" height="75px"></div>',point:'110.815398|19.528834',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"东方·龙湾",content:'<div style="float:left;width:120px;">起价：11000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文清大道与商贸大道交汇处（文昌市财政局北侧）</span> <br><br><a href="/House-show?id=16">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/" wdith="80px" height="75px"></div>',point:'110.816225|19.529311',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"龙禧湾偶寓",content:'<div style="float:left;width:120px;">起价：0 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜开发区文府大道星蓝湾销售部(市政往南200米)</span> <br><br><a href="/House-show?id=18">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201301/s_5108892397125.jpg" wdith="80px" height="75px"></div>',point:'110.822585|19.542496',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"白金海岸",content:'<div style="float:left;width:120px;">起价：9600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜高隆湾旅游大道一环西白金海岸酒店2号楼一层大厅</span> <br><br><a href="/House-show?id=19">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201301/s_51088b505d8e0.jpg" wdith="80px" height="75px"></div>',point:'110.823627|19.542291',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"蓝湖海韵",content:'<div style="float:left;width:120px;">起价：7600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：海南省文昌市清澜开发区惠民路段北侧（现市委市政府旁）</span> <br><br><a href="/House-show?id=20">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201301/s_5107afef650a3.jpg" wdith="80px" height="75px"></div>',point:'110.79904|19.552826',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"椰海明珠",content:'<div style="float:left;width:120px;">起价：6980 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌清澜开发区商贸大道南侧（检察院旁边）</span> <br><br><a href="/House-show?id=21">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e428b11dfc.jpg" wdith="80px" height="75px"></div>',point:'110.806343|19.555509',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"鑫源锦程",content:'<div style="float:left;width:120px;">起价：6300 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文城镇文清大道289-1号（市人民法院附近）</span> <br><br><a href="/House-show?id=24">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201301/s_51089ff2db487.jpg" wdith="80px" height="75px"></div>',point:'110.793731|19.559222',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"左城右海",content:'<div style="float:left;width:120px;">起价：43000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文城镇文蔚路(市就业局对面)</span> <br><br><a href="/House-show?id=25">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_5111ee1759645.jpg" wdith="80px" height="75px"></div>',point:'110.763225|19.591205',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"天水星河",content:'<div style="float:left;width:120px;">起价：6200 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：海南省文昌市文航大道南侧</span> <br><br><a href="/House-show?id=26">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/" wdith="80px" height="75px"></div>',point:'110.753847|19.637107',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"月亮城",content:'<div style="float:left;width:120px;">起价：6600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌文城镇文航路中段</span> <br><br><a href="/House-show?id=27">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e3eaf02758.jpg" wdith="80px" height="75px"></div>',point:'110.759129|19.636834',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"同仁.红椰湾",content:'<div style="float:left;width:120px;">起价：7000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文清大道旁</span> <br><br><a href="/House-show?id=28">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/" wdith="80px" height="75px"></div>',point:'|',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"天成.夏湾拿",content:'<div style="float:left;width:120px;">起价：7680 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜开发区惠民路16号</span> <br><br><a href="/House-show?id=29">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e3e24d319e.jpg" wdith="80px" height="75px"></div>',point:'110.811949|19.551353',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"平海.逸龙湾",content:'<div style="float:left;width:120px;">起价：13000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜高龙湾旅游大道经纬花园</span> <br><br><a href="/House-show?id=30">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e3cbdb456d.jpg" wdith="80px" height="75px"></div>',point:'110.827076|19.54362',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海拓澜湾",content:'<div style="float:left;width:120px;">起价：10800 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市高隆湾旅游大道</span> <br><br><a href="/House-show?id=31">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e3aa4c8b88.jpg" wdith="80px" height="75px"></div>',point:'|',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"宏图.高隆湾壹号",content:'<div style="float:left;width:120px;">起价：17346 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：海南省文昌市高隆湾高隆路A号</span> <br><br><a href="/House-show?id=32">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e39b023579.jpg" wdith="80px" height="75px"></div>',point:'110.839168|19.548747',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"同创.美兰海岸",content:'<div style="float:left;width:120px;">起价：8000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜开发区高隆湾白金路</span> <br><br><a href="/House-show?id=33">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e36e9de867.jpg" wdith="80px" height="75px"></div>',point:'110.812398|19.550161',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"阳光东海岸",content:'<div style="float:left;width:120px;">起价：5200 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜开发区商贸大道（南方电网对面）</span> <br><br><a href="/House-show?id=34">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e32146ea45.jpg" wdith="80px" height="75px"></div>',point:'110.810997|19.557459',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"金椰园",content:'<div style="float:left;width:120px;">起价：5500 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌文昌清澜开发区文府路（市政府旁）</span> <br><br><a href="/House-show?id=35">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e30c19ec19.jpg" wdith="80px" height="75px"></div>',point:'110.804709|19.548253',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"波溪利亚湾",content:'<div style="float:left;width:120px;">起价：11700 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜区文府路299号（毗邻市政府行政中心）</span> <br><br><a href="/House-show?id=36">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201302/s_510e2f4214df8.jpg" wdith="80px" height="75px"></div>',point:'110.817231|19.536704',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海的理想",content:'<div style="float:left;width:120px;">起价：12000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文府路</span> <br><br><a href="/House-show?id=37">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/" wdith="80px" height="75px"></div>',point:'110.814554|19.519371',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"八一.益园",content:'<div style="float:left;width:120px;">起价：5600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜开发区白金路</span> <br><br><a href="/House-show?id=38">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/" wdith="80px" height="75px"></div>',point:'110.821812|19.546771',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"壹品国际",content:'<div style="float:left;width:120px;">起价：8200 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文城镇清澜开发区疏港大道</span> <br><br><a href="/House-show?id=39">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201304/s_516cbdaee39df.jpg" wdith="80px" height="75px"></div>',point:'110.82819|19.550774',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"叠翠苑",content:'<div style="float:left;width:120px;">起价：6980 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市清澜区文清大道（椰子大观园正对面）</span> <br><br><a href="/House-show?id=40">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201311/s_527b873ceef84.jpg" wdith="80px" height="75px"></div>',point:'110.803505|19.557144',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"金山国际",content:'<div style="float:left;width:120px;">起价：6090 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文府路</span> <br><br><a href="/House-show?id=41">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201304/s_5167bd8f5b942.jpg" wdith="80px" height="75px"></div>',point:'110.80584|19.55332',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"森海湾",content:'<div style="float:left;width:120px;">起价：7600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：海南省文昌市高隆湾旅游大道西侧</span> <br><br><a href="/House-show?id=47">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201304/s_515a8931416d6.jpg" wdith="80px" height="75px"></div>',point:'110.83164|19.548287',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"白金海岸",content:'<div style="float:left;width:120px;">起价：9000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：海南省文昌市清澜开发区高隆湾旅游大道一环西</span> <br><br><a href="/House-show?id=48">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201304/s_515eef07be8ff.jpg" wdith="80px" height="75px"></div>',point:'110.820752|19.53851',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"宏图高龙湾1号",content:'<div style="float:left;width:120px;">起价：17346 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：海南省文昌市高隆湾高隆路A号 </span> <br><br><a href="/House-show?id=49">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201304/s_515ff7ea67ab7.jpg" wdith="80px" height="75px"></div>',point:'110.831352|19.548219',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"东方龙湾",content:'<div style="float:left;width:120px;">起价：11000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市文清大道与商贸大道交汇处（文昌市财政局北）</span> <br><br><a href="/House-show?id=50">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201304/s_515fd4ba30fe1.jpg" wdith="80px" height="75px"></div>',point:'110.818453|19.535614',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"乐清湾",content:'<div style="float:left;width:120px;">起价：10000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：海南省文昌市高隆湾旅游开发区旅游大道乐清湾营销中心</span> <br><br><a href="/House-show?id=51">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201304/s_5163b9689e964.jpg" wdith="80px" height="75px"></div>',point:'110.834047|19.555611',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海拓澜湾",content:'<div style="float:left;width:120px;">起价：10800 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址：文昌市高隆湾旅游大道</span> <br><br><a href="/House-show?id=52">查看楼盘详细>></a></div><div style="float:right;width:80px;"><img src="/Uploads/House/201304/s_5163d26739992.jpg" wdith="80px" height="75px"></div>',point:'110.832772|19.546243',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}]
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><p style="padding-top:8px;"><hr></p><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
 
for (var i = 0; i < markerArr.length; i++) {
var json=markerArr[i]
var txt = markerArr[i].title;
var pintx = markerArr[i].point.split('|')[0];
var pinty = markerArr[i].point.split('|')[1];
var myCompOverlay=new ComplexCustomOverlay(new BMap.Point(pintx, pinty), txt, txt); //这步是将覆盖物存到变量，以便下面使用。
mp.addOverlay(myCompOverlay);
 
(function(){
var index = i;
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var _iw = createInfoWindow(i);
var _marker = myCompOverlay; //当初存的覆盖物变量，这里派上用场了。
_marker.addEventListener("click",function(e){
mp.openInfoWindow(_iw,point);
});
if(!!json.isOpen){
this.openInfoWindow(_iw);
}
})()
}
</script>

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论