【javascript】百度地图API学习笔记三-自定义覆盖物
&p .=&padding: 0 margin: 0 font-family: Helvetica, Arial, font-size: 12 line-height: 19 background-color: rgb(255, 255, 255);&&【覆盖物类/Overlay的方法】&br&initialize(map:Map)& HTMLElement& 抽象方法，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。自定义覆盖物时需要实现此方法。自定义覆盖物时需要将覆盖物对应的HTML元素返回。&br&&br&isVisible()& Boolean& 判断覆盖物是否可见。&&br&&&br&draw()& none& 抽象方法，当地图状态发生变化时，由系统调用对覆盖物进行绘制。自定义覆盖物需要实现此方法。&br&&br&show()& none& 显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空。&br&&&br&hide()& none& 隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none。&/p&&p .=&padding: 0 margin: 0 font-family: Helvetica, Arial, font-size: 12 line-height: 19 background-color: rgb(255, 255, 255);&&&br&【如何创建自定义覆盖物】&/p&&blockquote .=&background-image: background-attachment: background-color: rgb(252, 252, 252); border-color: rgb(238, 238, 238); border-.: border-width: 1px 1px 1px 4 font-family: Arial, 宋体; margin: 10 padding: 5px 10 word-wrap: break- word-break: font-size: 12 line-height: 19 background-position: 0px 0 background-repeat:&&&p .=&padding: 0 margin: 0&&function linOverlay(point,json,map){&br&&& && this._map=&br&&&&&& this._point =&br&&&&&& this._text = json.&br&&&&&& this._overText = this._text+'('+json.content+')';&br&}&br&linOverlay.prototype = new BMap.Overlay();&br&linOverlay.prototype.initialize = function(){&br&&&&&& var div = this._div = document.createElement(&div&);&br&&& && //设置层样式开始&br&&&&&& div.style.position = &absolute&;&br&&&&&& div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);&br&&&&&& div.style.backgroundColor = &#EE5D5B&;&br&&&&&& div.style.border = &1px solid #BC3B3A&;&br&&&&&& div.style.color = &white&;&br&&&&&& div.style.height = &18px&;&br&&&&&& div.style.padding = &5px&;&br&&&&&& div.style.lineHeight = &18px&;&br&&&&&& div.style.whiteSpace = &nowrap&;&br&&& && div.style.cursor = &pointer&;&br&&&&&& div.style.MozUserSelect = &none&;&br&&&&&& div.style.fontSize = &12px&&br&&&&&& var span = this._span = document.createElement(&span&);&br&&&&&& div.appendChild(span);&br&&&&&& span.appendChild(document.createTextNode(this._text));&&&& &&br&&&&&& var that =&br&&&&&& var arrow = this._arrow = document.createElement(&div&);&br&&&&&& arrow.style.background = &url(/baidu_map/images/label.png) no-repeat&;&br&&&&&& arrow.style.position = &absolute&;&br&&&&&& arrow.style.width = &11px&;&br&&&&&& arrow.style.height = &10px&;&br&&&&&& arrow.style.top = &28px&;&br&&&&&& arrow.style.left = &10px&;&br&&&&&& arrow.style.overflow = &hidden&;&br&&&&&& div.appendChild(arrow);&br&&& && //监听父层事件&br&&&&&& div.onmouseover = function(){&br&&&&&&&& this.style.backgroundColor = &#ff9625&;&br&&&&&&&& this.style.borderColor = &#dc8820&;&br&&&&&&&& this.getElementsByTagName(&span&)[0].innerHTML = that._overT&br&&&&&&&& arrow.style.backgroundPosition = &0px -10px&;&br&&&&&& }&br&&&&&& div.onmouseout = function(){&br&&&&&&&& this.style.backgroundColor = &#EE5D5B&;&br&&&&&&&& this.style.borderColor = &#BC3B3A&;&br&&&&&&&& this.getElementsByTagName(&span&)[0].innerHTML = that._&br&&&&&&&& arrow.style.backgroundPosition = &0px 0px&;&br&&&&&& }&br&&& && div.onclick=function(){&br&&& &&& &alert('onclick');&br&&& && }&br&&& && //把自定义的覆盖物加到标签容器&br&&&&&& this._map.getPanes().labelPane.appendChild(div);&br&&&&&&&br&}&br&//重画事件&br&linOverlay.prototype.draw = function(){&br&&&&&& var map = this._&br&&&&&& var pixel = map.pointToOverlayPixel(this._point);&br&&&&&& this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + &px&;&br&&&&&& this._div.style.top& = pixel.y - 40 + &px&;&br&}&/p&&/blockquote&&p .=&padding: 0 margin: 0 font-family: Helvetica, Arial, font-size: 12 line-height: 19 background-color: rgb(255, 255, 255);&&&&br&【写在后面】&br&使用百度自定义覆盖物，个人测试一定要重写draw方法，不然覆盖物的显示位置不正确。&/p&
17 总笔记数
1.8万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：君，已阅读到文档的结尾了呢~~
百度地图api1.3开发指南-百度地图 javascript api
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
百度地图api1.3开发指南-百度地图 javascript api
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口百度地图自定义覆盖物_Javascript教程_
百度地图自定义覆盖物
来源：人气：599
百度地图自定义覆盖物
var map = new BMap.Map('allmap');
var Bcenter = new BMap.Point(116.404,39.915);
map.centerAndZoom(Bcenter,11);
//自定义的覆盖物
function myOverlay(point,text,mouverText){
this._point =
this._text =
this._overtext = mouseoverT
//继承overlay的API
myOverlay.ototype = new BMap.Overlay();
//初始化自定义覆盖物
myOverlay.prototype.initialize = function(map){
this._map =
//创建div标签
var div = this._div = document.createElement('div');
div.style.position = 'absolute';
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = '#EE5D5B';
div.style.border = '1px solid #BC3B3A';
div.style.color = 'white';
div.style.height = '18px';
div.style.padding = '2px';
div.style.lineHeight = '18px';
div.style.whiteSpace = 'nowrap';
div.style.MozUserSelect = 'none';
div.style.fontSize = '12px';
//创建span标签
var span = this._span = document.createElement('span');
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that =
//箭头的穿件
var arrow = this._arrow = document.createElement('div');
arrow.style.background = "url(/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
//标签绑定事件
/*div.onmouseover = function(){
this.style.backgroundColor = "#6BADCA";
this.style.borderColor = "#0000ff";
this.getElementsByTagName("span")[0].innerHTML = that._
arrow.style.backgroundPosition = "0px -20px";
div.onmouseout = function(){
this.style.backgroundColor = "#EE5D5B";
this.style.borderColor = "#BC3B3A";
this.getElementsByTagName("span")[0].innerHTML = that._
arrow.style.backgroundPosition = "0px 0px";
//添加到覆盖物的容器中
map.getPanes().labelPane.appendChild(div);
//绘制覆盖物
myOverlay.prototype.draw = function(){
var map = this._
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.left) + 'px';
this._div.style.top = pixel.y - 30 + 'px';
//覆盖物显示
myOverlay.prototype.show = function(){
if(this._div){
this._div.style.display = '';
//隐藏覆盖物
myOverlay.prototype.hide = function(){
if(this._div){
this._div.style.display = 'none';
//自定义覆盖物添加事件
myOverlay.prototype.addEventListener = function (event, fun) {
this._div['on' + event] =
var myoverlay = new myOverlay(Bcenter,'鼠标上来看看','鼠标下去看看');
map.addOverlay(myoverlay);
myoverlay.addEventListener('click',function(){
alert('注册点击事件');
&/script&View Code
优质网站模板--旗下，中国最好的系统开发学习平台！
热门推荐：
当前位置： >
百度地图API自定义覆盖物点击分别弹出信息窗口
发布时间： 14:22 | 作者：采集侠 | 来源：网络整理 | 浏览：
因为工作需我们需要把百度地图自定义一些东西，如房产网站就要有楼盘名了，我们点击时就弹出信息窗口，然后调用此楼盘的相关信息，下面我来介绍具体地。
因为工作需要，网上找来找去都没有现成的，自己的原生JS又不好，就将网上找的循环多个标注代码改了改，还不赖，去掉原来的标注,label，直接用我想用的自定义覆盖物和信息窗口歹徒，虽然代码零散，但至少目的达到了。
今天分享刚用上的百度地图API示例：根据后端输出的数据，动态在地图上循环添加多个自定义覆盖物，并且点击覆盖物能弹出对应的信息窗口。
我想需要这个的应该不少，希望有需要的朋友都能用得上。
演示效果图：
本示例用的是1.2版本的API,下面是全部代码，注意CSS背景图的路径。
附上实例中的2个图片：
演示地址：因为WP的固定链接，FTP上传的文件都没法访问，暂时没法演示。可以自行复制下面的完整代码另存为html静态文件看效果。
&代码如下 &
复制代码 &
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&style type="text/css"&
body, html,#allmap {width: 100%;height: 100%;overflow:margin:0;}
#l-map{height:100%;width:78%;float:border-right:2px solid #}
#r-result{height:100%;width:20%;float:}
&script type="text/javascript" src="http://api./api?v=1.2&ak=CB2ede775afeb6e413abd"&&/script&
&title&循环添加多个自定义覆盖物，点击弹出对应信息窗口&/title&
&style type="text/css"&
*{margin:0;
padding:0;
.q_MapInfo{
.q_MapInfo h4{
line-height:25
color:#2b2b2b;
border-bottom:1px solid #999;
font-size:12
margin-bottom:5
font-weight:
.q_infos:after{
visibility:
font-size:0;
content:"";
*html .q_infos{zoom:1;}
*html+first-child .q_infos{zoom:1;}
.q_infoLeft{
font-size:12
line-height:30
.q_infoLeft p{
line-height:30
.q_infoLeft a{
text-decoration:
color:#2b2b2b;
.q_infoLeft a:hover{
.q_infoRight{
.q_infoRight img{
.q_infoBot{
border-top:1px solid #999;
.q_infoBot p{
line-height:30
.q_infoBot em{
font-size:24
font-style:
&div&&/div&
&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..559595);
mp.centerAndZoom(point, 15);
mp.enableScrollWheelZoom();
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText){
this._point =
this._text =
this._overText = mouseoverT
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._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 =
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._overT
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._
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);
ComplexCustomOverlay.prototype.draw = function(){
var map = this._
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] =
//下面开始尝试数组（这是后台输出的数据，这里只能静态写一些做演示。）
var markerArr = [{title:"绿岛",content:'&div&起价：6800 元/平米&br&&br&&span&地址：文昌市清澜开发区文清大道北侧（椰子大观园对面）&/span& &br&&br&&a href="/House-show?id=8"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510cbb671095a.jpg" wdith="80px"&&/div&',point:'110..558234',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"中南.森海湾",content:'&div&起价：7600 元/平米&br&&br&&span&地址：海南省文昌市高隆湾旅游大道&/span& &br&&br&&a href="/House-show?id=12"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201301/s_5bdb.jpg" wdith="80px"&&/div&',point:'110..548253',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"天御湾",content:'&div&起价：4200 元/平米&br&&br&&span&地址：文昌市文航路&/span& &br&&br&&a href="/House-show?id=13"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201301/s_5a2e.jpg" wdith="80px"&&/div&',point:'|',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"观澜雅苑",content:'&div&起价：5000 元/平米&br&&br&&span&地址：文昌市清澜开发区文清大道&/span& &br&&br&&a href="/House-show?id=23"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201301/s_51089f4bdf251.jpg" wdith="80px"&&/div&',point:'110..555305',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海拓澜湾",content:'&div&起价：10800 元/平米&br&&br&&span&地址：文昌市高隆湾旅游大道&/span& &br&&br&&a href="/House-show?id=15"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201301/s_b.jpg" wdith="80px"&&/div&',point:'110..528834',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"东方·龙湾",content:'&div&起价：11000 元/平米&br&&br&&span&地址：文昌市文清大道与商贸大道交汇处（文昌市财政局北侧）&/span& &br&&br&&a href="/House-show?id=16"&查看楼盘详细&&&/a&&/div&&div&&img src="/" wdith="80px"&&/div&',point:'110..529311',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"龙禧湾偶寓",content:'&div&起价：0 元/平米&br&&br&&span&地址：文昌市清澜开发区文府大道星蓝湾销售部(市政往南200米)&/span& &br&&br&&a href="/House-show?id=18"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201301/s_5.jpg" wdith="80px"&&/div&',point:'110..542496',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"白金海岸",content:'&div&起价：9600 元/平米&br&&br&&span&地址：文昌市清澜高隆湾旅游大道一环西白金海岸酒店2号楼一层大厅&/span& &br&&br&&a href="/House-show?id=19"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201301/s_e0.jpg" wdith="80px"&&/div&',point:'110..542291',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"蓝湖海韵",content:'&div&起价：7600 元/平米&br&&br&&span&地址：海南省文昌市清澜开发区惠民路段北侧（现市委市政府旁）&/span& &br&&br&&a href="/House-show?id=20"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201301/s_5107afef650a3.jpg" wdith="80px"&&/div&',point:'110.826',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"椰海明珠",content:'&div&起价：6980 元/平米&br&&br&&span&地址：文昌清澜开发区商贸大道南侧（检察院旁边）&/span& &br&&br&&a href="/House-show?id=21"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e428b11dfc.jpg" wdith="80px"&&/div&',point:'110..555509',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"鑫源锦程",content:'&div&起价：6300 元/平米&br&&br&&span&地址：文昌市文城镇文清大道289-1号（市人民法院附近）&/span& &br&&br&&a href="/House-show?id=24"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201301/s_57.jpg" wdith="80px"&&/div&',point:'110..559222',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"左城右海",content:'&div&起价：43000 元/平米&br&&br&&span&地址：文昌市文城镇文蔚路(市就业局对面)&/span& &br&&br&&a href="/House-show?id=25"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_5.jpg" wdith="80px"&&/div&',point:'110..591205',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"天水星河",content:'&div&起价：6200 元/平米&br&&br&&span&地址：海南省文昌市文航大道南侧&/span& &br&&br&&a href="/House-show?id=26"&查看楼盘详细&&&/a&&/div&&div&&img src="/" wdith="80px"&&/div&',point:'110..637107',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"月亮城",content:'&div&起价：6600 元/平米&br&&br&&span&地址：文昌文城镇文航路中段&/span& &br&&br&&a href="/House-show?id=27"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e3eaf02758.jpg" wdith="80px"&&/div&',point:'110..636834',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"同仁.红椰湾",content:'&div&起价：7000 元/平米&br&&br&&span&地址：文昌市文清大道旁&/span& &br&&br&&a href="/House-show?id=28"&查看楼盘详细&&&/a&&/div&&div&&img src="/" wdith="80px"&&/div&',point:'|',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"天成.夏湾拿",content:'&div&起价：7680 元/平米&br&&br&&span&地址：文昌市清澜开发区惠民路16号&/span& &br&&br&&a href="/House-show?id=29"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e3e24d319e.jpg" wdith="80px"&&/div&',point:'110..551353',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"平海.逸龙湾",content:'&div&起价：13000 元/平米&br&&br&&span&地址：文昌市清澜高龙湾旅游大道经纬花园&/span& &br&&br&&a href="/House-show?id=30"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e3cbdb456d.jpg" wdith="80px"&&/div&',point:'110..54362',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海拓澜湾",content:'&div&起价：10800 元/平米&br&&br&&span&地址：文昌市高隆湾旅游大道&/span& &br&&br&&a href="/House-show?id=31"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e3aa4c8b88.jpg" wdith="80px"&&/div&',point:'|',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"宏图.高隆湾壹号",content:'&div&起价：17346 元/平米&br&&br&&span&地址：海南省文昌市高隆湾高隆路A号&/span& &br&&br&&a href="/House-show?id=32"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e39b023579.jpg" wdith="80px"&&/div&',point:'110..548747',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"同创.美兰海岸",content:'&div&起价：8000 元/平米&br&&br&&span&地址：文昌市清澜开发区高隆湾白金路&/span& &br&&br&&a href="/House-show?id=33"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e36e9de867.jpg" wdith="80px"&&/div&',point:'110..550161',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"阳光东海岸",content:'&div&起价：5200 元/平米&br&&br&&span&地址：文昌市清澜开发区商贸大道（南方电网对面）&/span& &br&&br&&a href="/House-show?id=34"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e32146ea45.jpg" wdith="80px"&&/div&',point:'110..557459',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"金椰园",content:'&div&起价：5500 元/平米&br&&br&&span&地址：文昌文昌清澜开发区文府路（市政府旁）&/span& &br&&br&&a href="/House-show?id=35"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e30c19ec19.jpg" wdith="80px"&&/div&',point:'110..548253',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"波溪利亚湾",content:'&div&起价：11700 元/平米&br&&br&&span&地址：文昌市清澜区文府路299号（毗邻市政府行政中心）&/span& &br&&br&&a href="/House-show?id=36"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201302/s_510e2f4214df8.jpg" wdith="80px"&&/div&',point:'110..536704',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海的理想",content:'&div&起价：12000 元/平米&br&&br&&span&地址：文昌市文府路&/span& &br&&br&&a href="/House-show?id=37"&查看楼盘详细&&&/a&&/div&&div&&img src="/" wdith="80px"&&/div&',point:'110..519371',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"八一.益园",content:'&div&起价：5600 元/平米&br&&br&&span&地址：文昌市清澜开发区白金路&/span& &br&&br&&a href="/House-show?id=38"&查看楼盘详细&&&/a&&/div&&div&&img src="/" wdith="80px"&&/div&',point:'110..546771',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"壹品国际",content:'&div&起价：8200 元/平米&br&&br&&span&地址：文昌市文城镇清澜开发区疏港大道&/span& &br&&br&&a href="/House-show?id=39"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201304/s_516cbdaee39df.jpg" wdith="80px"&&/div&',point:'110.774',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"叠翠苑",content:'&div&起价：6980 元/平米&br&&br&&span&地址：文昌市清澜区文清大道（椰子大观园正对面）&/span& &br&&br&&a href="/House-show?id=40"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201311/s_527b873ceef84.jpg" wdith="80px"&&/div&',point:'110..557144',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"金山国际",content:'&div&起价：6090 元/平米&br&&br&&span&地址：文昌市文府路&/span& &br&&br&&a href="/House-show?id=41"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201304/s_b942.jpg" wdith="80px"&&/div&',point:'110.32',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"森海湾",content:'&div&起价：7600 元/平米&br&&br&&span&地址：海南省文昌市高隆湾旅游大道西侧&/span& &br&&br&&a href="/House-show?id=47"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201304/s_515a.jpg" wdith="80px"&&/div&',point:'110.287',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"白金海岸",content:'&div&起价：9000 元/平米&br&&br&&span&地址：海南省文昌市清澜开发区高隆湾旅游大道一环西&/span& &br&&br&&a href="/House-show?id=48"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201304/s_515eef07be8ff.jpg" wdith="80px"&&/div&',point:'110..53851',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"宏图高龙湾1号",content:'&div&起价：17346 元/平米&br&&br&&span&地址：海南省文昌市高隆湾高隆路A号 &/span& &br&&br&&a href="/House-show?id=49"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201304/s_515ff7ea67ab7.jpg" wdith="80px"&&/div&',point:'110..548219',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"东方龙湾",content:'&div&起价：11000 元/平米&br&&br&&span&地址：文昌市文清大道与商贸大道交汇处（文昌市财政局北）&/span& &br&&br&&a href="/House-show?id=50"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201304/s_515fd4ba30fe1.jpg" wdith="80px"&&/div&',point:'110..535614',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"乐清湾",content:'&div&起价：10000 元/平米&br&&br&&span&地址：海南省文昌市高隆湾旅游开发区旅游大道乐清湾营销中心&/span& &br&&br&&a href="/House-show?id=51"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201304/s_4.jpg" wdith="80px"&&/div&',point:'110..555611',isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海拓澜湾",content:'&div&起价：10800 元/平米&br&&br&&span&地址：文昌市高隆湾旅游大道&/span& &br&&br&&a href="/House-show?id=52"&查看楼盘详细&&&/a&&/div&&div&&img src="/Uploads/House/201304/s_2.jpg" wdith="80px"&&/div&',point:'110..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 = Window("&b title="\" + json.title + "'&" + json.title + "&/b&&p&&hr&&/p&&div&"+json.content+"&/div&");
for (var i = 0; i & markerArr. i++) {
var json=markerArr[i]
var txt = markerArr[i].
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 =
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 = myCompO //当初存的覆盖物变量，这里派上用场了。
_marker.addEventListener("click",function(e){
mp.openInfoWindow(_iw,point);
if(!!json.isOpen){
this.openInfoWindow(_iw);}