* 添加标记
* @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('鼠标移上来了')
})
七、全部源代码
自定义覆盖物
百度地图添加覆盖物,拖放覆盖物获取当前的坐标,点击地图设置覆盖位置，也可以拖拽地图设置覆盖物位置方法/步骤
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,html {
width: 100%
height: 100%
margin: 0
font-family: "微软雅黑"
font-family: "微软雅黑"
}
#allmap {
width: 100%
height: 500px
}
p {
margin-left: 5px
font-size: 14px
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>百度地图添加覆盖物，拖拽覆盖物获取当前坐标</title>
</head>
<body>
<div id="allmap"></div>
<p>添加点击地图监听事件，点击地图后显示当前经纬度</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap")
var point = new BMap.Point(116.404, 39.915)
map.centerAndZoom(point, 11)
map.addEventListener("click", function(e){
alert('经度:'+e.point.lng+' , 纬度: '+e.point.lat)
var now_point = new BMap.Point(e.point.lng, e.point.lat )
marker.setPosition(now_point)//设置覆盖物位置
})
var marker = new BMap.Marker(point)//创建marker对象
marker.enableDragging()//marker可拖拽
//拖拽结束事件
marker.addEventListener("dragend", function(e){
//获取覆盖物位置
var o_Point_now = marker.getPosition()
var lng = o_Point_now.lng
var lat = o_Point_now.lat
//e.point.lng 地理经度。
// e.point.lat 地理纬度。
//alert(e.point.lng + "---, " + e.point.lat)
get_lng_lat()
})
map.addOverlay(marker)//在地图中添加marker
get_lng_lat()
//获取经纬度
function get_lng_lat(){
//返回覆盖物标注的地理坐标。
var o_Point_now = marker.getPosition()
var lng = o_Point_now.lng
var lat = o_Point_now.lat
alert('经度:'+lng+' , 纬度: '+lat)
}
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）