js版本百度地图创建自定义覆盖物，点击显示对应信息框

<!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(img/1.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(img/1.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(img/1.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(img/1.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(img/2.gif) repeat-x 0 -33px";
this.getElementsByTagName("span")[0].innerHTML = that._overText;
arrow.style.background = "url(img/2.gif) no-repeat -8px -100px";
leftBar.style.background = "url(img/2.gif) no-repeat -12px -2px";
rightBar.style.background = "url(img/2.gif) no-repeat -22px -2px";
}

div.onmouseout = function() {
this.style.background = "url(img/1.gif) repeat-x 0 -33px";
this.getElementsByTagName("span")[0].innerHTML = that._text;
arrow.style.background = "url(img/1.gif) no-repeat -8px -100px";
leftBar.style.background = "url(img/1.gif) no-repeat -12px -2px";
rightBar.style.background = "url(img/1.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: 8 px‘+
"><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);
});
console.log(json.isOpen);
if(!!json.isOpen) {
this.openInfoWindow(_iw);
}
})()
}
</script>

时间： 2024-11-08 22:45:14

js版本百度地图创建自定义覆盖物，点击显示对应信息框的相关文章

百度地图批量添加标注+点击显示对应窗口信息

<script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(121.338403, 31.24203); map.centerAndZoom(point, 7);//创建中心点 map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map.enab

百度地图上自定义图片覆盖物上加点击事件

在百度地图上加自定义图片覆盖物之后,在这个覆盖物上加点击手势,发现并不识别.原因不太清楚.不过可以通过别的方法来实现这个功能. 需要用到BMKMapViewDelegate中的方法: - (void)mapView:(BMKMapView *)mapView onClickedMapBlank:(CLLocationCoordinate2D)coordinate 然后判断所点击的坐标是否在指定区域内,在指定区域内之后,调用自己写的相应地方法即可. 百度地图上自定义图片覆盖物上加点击事件,布布扣,

百度地图创建标记点

项目需求:项目需要从数据库加载数据到百度地图上,显示未标记点. js代码如下: //创建地图 function showMap(){ map = new BMap.Map("information_date",{minZoom:6,maxZoom:17}); // 创建地图实例 map.centerAndZoom(city,14); // 初始化地图,设置中心点坐标和地图级别. map.enableScrollWheelZoom(true); //启用滚轮放大缩小 //向地图中添加缩放

百度地图API自定义地图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示. 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息. 第四步:获取代码.将代码贴到你的网页

Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

(从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析. 使用的库主要就是有fs.request. // 请求包 var fs = require('fs');var request = require('request'); // 设置百度API的参数var baiduApiKey = "cQV9U4QhamoOjg6rjdOTAQSiUMxxxxx

百度地图的使用之获取数据库表中信息的坐标点显示在地图上

//通用封装好的js: var map = new BMap.Map("container"); //建树Map实例 var point = new BMap.Point(103.976032, 33.845509); // 建树点坐标 map.centerAndZoom(point, 6); // 初始化地图,设置中心点坐标和地图级别. //地图事件设置函数: map.enableDragging(); //启用地图拖拽事件,默认启用(可不写) map.enableScrollWhe

谈谈百度地图API使用（标注，自定义控件，信息窗口，拖... ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content

Arcgis andoid开发之应用百度地图接口实现精准定位与显示

怀着激动.兴奋的心情,在这个漫天柳絮的季节写下了这片博文,为什么呢,因为困扰我很久的一个技术性的问题得到了解决,发次博文,供大家参观.学习,同时,也以慰藉我长期困扰的心情,好了,废话不再,言归正传,看看这到底是个什么东西? 首先,简单地介绍一下功能:1.离线地图的加载:2.GPS的定位与显示.文字比较模糊,看看实际的效果图: 功能其实很简单,下面解释一下实现思路: 1.布局 <?xml version="1.0" encoding="utf-8"?> &