码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-07-14 16:32:36      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:normal   create   apc   enter   charset   custom   set   white   ons   

<!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>

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

标签:normal   create   apc   enter   charset   custom   set   white   ons   

原文地址:http://www.cnblogs.com/haodoubao/p/7170353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!