只是个原型。看到他们批量标注监听标注要闭包。其实2.0后可以直接监听标注事件。翻了百度地图API⼿册和demo N次，花了⼀上午终于搞定了 还是记录下来。 原理：⾸先添加标注点和标签，然后监听标注点标签click事件，获得标签点击事件， 得到标注点的经纬度信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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="api.map.baidu/api?v=2.0&ak=你的KEY"></script>
<style>
.lihidden{
display:none
}
</style>
</head>
<body>
坝上草原秋天景最佳时间
<div >
<div id="allmap" ></div>
<div id="right" >
<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实例
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); //创建坐标点
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_LEFT}); //设置版权控件位置
map.addControl(cr); //添加版权控件
var bs = Bounds(); //返回地图可视区域
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>
