您的位置：首页 > 其它

百度API 批量添加标注和监听标注点击事件

2014-12-05 16:08 183 查看

只是个原型。看到他们批量标注监听标注要闭包。其实2.0后可以直接监听标注事件。翻了百度地图API手册和demo N次，花了一上午终于搞定了还是记录下来。

原理：首先添加标注点和标签，然后监听标注点标签click事件，获得标签点击事件，得到标注点的经纬度信息

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度地图添加标注展示点</title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></script>
<style>
.lihidden{
display:none
}
</style>
</head>
<body>
<div style="width:1200px;height:375px">
<div id="allmap" style="width:800px;height:375px;float:left"></div>
<div id="right" style="width:400px;height:375px;float:left">
<ul>
<li class="lihidden" name='104.05434130.68075'>成都东站</li>
<li class="lihidden" name='104.14805230.635457'>青羊区政府</li>
<li name='104.09070430.596048'>五凝大厦</li>
</ul>
</div>
</div>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap");            // 创建Map实例
map.enableScrollWheelZoom(true);
var  mapStyle ={
features: ["road", "building","water","land"],//隐藏地图上的poi
style : "normal"  //设置地图底图样式，目前支持normal（默认样式）,dark（深色样式）,light（浅色样式）
}
map.setMapStyle(mapStyle);
var point = new BMap.Point(104.073394,30.639802); //创建坐标点
map.centerAndZoom(point, 12); //设置中心点和层级

var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_LEFT});   //设置版权控件位置
map.addControl(cr); //添加版权控件

var bs = map.getBounds();   //返回地图可视区域
cr.addCopyright({id: 1, content: '<img src="ico/items.png"/>', bounds: bs});  //设置左边提示

addpoint("104.054341","30.68075","成都东站","2");
addpoint("104.148052","30.635457","青羊区政府","3");
addpoint("104.090704","30.596048","五凝大厦","1");

//添加标注点函数
/*
px 经度坐标点
py 纬度坐标点
title 标注内容
style 标注风格 1在售 2规划 3售罄
*/
function addpoint(px,py,title,style)
{
// 根据风格参数设置ico
var newpointimg ="";
var newlabimg   ="";
switch (style)
{
case "1":
newpointimg="ico/bzico.png";
newlabimg  ="url(ico/titleico.png)";
break;
case "2":
newpointimg="ico/bzico2.png";
newlabimg  ="url(ico/titleico2.png)";
break;
default:
newpointimg="ico/bzico3.png";
newlabimg  ="url(ico/titleico3.png)";
break;
}

var newpoint = new BMap.Point(px,py);	//设置新的坐标点
var newlabtitle = title;
var icon = new BMap.Icon(newpointimg, new BMap.Size(15, 15), {//是引用图标的名字以及大小，注意大小要一样
anchor: new BMap.Size(7,15)//这句表示图片相对于所加的点的位置
});
var mkr = new BMap.Marker(newpoint, {
icon: icon
});
map.addOverlay(mkr); //添加标注
//添加标签
var label = new BMap.Label(newlabtitle,{offset:new BMap.Size(10,-18),position:newpoint});  // 创建文本标注对象
label.setStyle({
color : "white",
fontSize : "12px",
height : "18px",
width:"100px",
fontFamily:"微软雅黑",
border:"0px",
background:newlabimg,
textAlign:"center",
paddingTop:"2px",
cursor: "pointer"
});
map.addOverlay(label);
label.addEventListener("click",attribute);		//创建label监听事件

}
//触发监听事件
//根据x,y坐标显示对应窗口
function attribute(e)
{
var p = e.target;
var name = (p.getPosition().lng).toString()+(p.getPosition().lat).toString();
$("#right ul li").hide(); 		//隐藏所有子类
$("#right>ul>li[name='"+name+"']").show();				//取得li id 显示 必须全匹配否则火狐不兼容
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航