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

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

.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;
}

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: ‘

function createInfoWindow(i) {
var json = markerArr[i];
var iw = new BMap.InfoWindow("" + json.title + "

for(var i = 0; 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);
}
})()
}

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

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

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