如何在百度地图里面添加覆盖物，并且对每个覆盖物添加点击之后d出信息框的功能

/**

* 添加标记

* @param [{id:主键,name:名称,lon:经度,lat:纬度,icon:图标,context:d窗内容,viewImg:d窗图片},...] data

*/

function addMar(data){

for(var i = 0 i < data.length i++){

var marker = new BMap.Marker(new BMap.Point(data[i].lon, data[i].lat),{icon:new BMap.Icon(data[i].icon, new BMap.Size(50,50))})  // 创建标注

marker.setTitle(data[i].name)

marker.dataCont = data[i]

map.addOverlay(marker)

marker.addEventListener("click", function(e){   

var viewWin = "<h4 style='margin:0 0 5px 0padding:0.2em 0'>"+e.target.dataCont.name+"</h4>" + 

"<img style='float:rightmargin:4px' id='imgDemo' src='"+e.target.dataCont.viewImg+"' width='139' height='104' title='"+e.target.dataCont.name+"'/>" + 

"<p style='margin:0line-height:1.5font-size:13pxtext-indent:2em'>"+e.target.dataCont.context+"</p>" + 

"</div>"

var infoWindow = new BMap.InfoWindow(viewWin)

this.openInfoWindow(infoWindow)

//图片加载完毕重绘infowindow

document.getElementById('imgDemo').onload = function (){

infoWindow.redraw()//防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏

}

})

}

}

可以这样,先把生成标注的json数据直接存进marker对象.添加marker的点击监听,触发监听事件时会拿到marker对象本身,从里面可以获取之前我们存进去的json数据,然后拿这个json数据直接生成d窗

一、定义构造函数并继承Overlay

// 定义自定义覆盖物的构造函数

function SquareOverlay(center, length, color){

this._center = center

this._length = length

this._color = color

}

// 继承API的BMap.Overlay

SquareOverlay.prototype = new BMap.Overlay()

二、初始化自定义覆盖物

// 实现初始化方法

SquareOverlay.prototype.initialize = function(map){

// 保存map对象实例

this._map = map

// 创建div元素，作为自定义覆盖物的容器

var div = document.createElement("div")

div.style.position = "absolute"

// 可以根据参数设置元素外观

div.style.width = this._length + "px"

div.style.height = this._length + "px"

div.style.background = this._color

// 将div添加到覆盖物容器中

map.getPanes().markerPane.appendChild(div)

// 保存div实例

this._div = div

// 需要将div元素作为方法的返回值，当调用该覆盖物的show、

// hide方法，或者对覆盖物进行移除时，API都将 *** 作此元素。

return div

}

三、绘制覆盖物

// 实现绘制方法

SquareOverlay.prototype.draw = function(){

// 根据地理坐标转换为像素坐标，并设置给容器

var position = this._map.pointToOverlayPixel(this._center)

this._div.style.left = position.x - this._length / 2 + "px"

this._div.style.top = position.y - this._length / 2 + "px"

}

四、添加覆盖物

//添加自定义覆盖物

var mySquare = new SquareOverlay(map.getCenter(), 100, "red")

map.addOverlay(mySquare)

五、给自定义覆盖物添加事件

1、显示事件

SquareOverlay.prototype.show = function(){

if (this._div){

this._div.style.display = ""

}

}

添加完以上显示覆盖物事件后，只需要下面这句话，就可以显示覆盖物了。

mySquare.show()

2、隐藏覆盖物

// 实现隐藏方法

SquareOverlay.prototype.hide = function(){

if (this._div){

this._div.style.display = "none"

}

}

添加完以上code，只需使用这句话，即可隐藏覆盖物。

mySquare.hide()

3、改变覆盖物颜色

SquareOverlay.prototype.yellow = function(){

if (this._div){

this._div.style.background = "yellow"

}

}

上面这句话，是把覆盖物的背景颜色改成黄色，使用以下语句即可生效：

mySquare.yellow()

“第五部分、给覆盖物添加事件”小结：

我们在地图上添加了一个红色覆盖物，然后分别添加“显示、隐藏、改变颜色”的事件。示意图如下：

那么，我们需要在html里，先写出map的容器，和3个按钮。

<div style="width:520pxheight:340pxborder:1px solid gray" id="container"></div>

<p>

<input type="button" value="移除覆盖物" onclick="mySquare.hide()"/>

<input type="button" value="显示覆盖物" onclick="mySquare.show()"/>

<input type="button" value="变成黄色" onclick="mySquare.yellow()"/>

</p>

然后，在javascript中，添加这三个函数：

// 实现显示方法

SquareOverlay.prototype.show = function(){

if (this._div){

this._div.style.display = ""

}

}

// 实现隐藏方法

SquareOverlay.prototype.hide = function(){

if (this._div){

this._div.style.display = "none"

}

}

//改变颜色的方法

SquareOverlay.prototype.yellow = function(){

if (this._div){

this._div.style.background = "yellow"

}

}

六、如何给自定义覆盖物添加点击事件（这章重要！很多人问的）

比如，我们给自定义覆盖物点击click事件。首先，需要添加一个addEventListener 的事件。如下：

SquareOverlay.prototype.addEventListener = function(event,fun){

this._div['on'+event] = fun

}

再写该函数里面的参数，比如click。这样就跟百度地图API里面的覆盖物事件一样了。

mySquare.addEventListener('click',function(){

alert('click')

})

同理，添加完毕addEventListener之后，还可以添加其他鼠标事件，比如mouseover。

mySquare.addEventListener('mousemover',function(){

alert('鼠标移上来了')

})

七、全部源代码

自定义覆盖物

---