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

最新推荐文章于 2023-04-20 20:05:11 发布

li903986396

最新推荐文章于 2023-04-20 20:05:11 发布

阅读量4.7k

点赞数 1

分类专栏：百度API

本文链接：https://blog.csdn.net/li903986396/article/details/41748987

版权

百度API 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

只是个原型。看到他们批量标注监听标注要闭包。其实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>

li903986396

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
百度API 批量添加标注和监听标注点击事件

只是个原型。看到他们批量标注监听标注要闭包。其实2.0后可以直接监听标注事件。翻了百度地图API手册和demo N次，花了一上午终于搞定了还是记录下来。原理：首先添加标注点和标签，然后监听标注点标签click事件，获得标签点击事件，得到标注点的经纬度信息
复制链接

扫一扫