本文章简单的介绍了一下关于百度地图的应用，这里我介绍一个功能就是在自己定的层上给加个事件方法，有需要的参考一下。
给marker、lable、circle等overlay添加事件很简单，直接addeventlistener即可。那么，自定义覆盖物的事件应该如何添加呢？我们一起来看一看~
-----------------------------------------------------------------------------------------一、定义构造函数并继承Overlay
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy5330')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5330>// 定义自定义覆盖物的构造函数 <br />function SquareOverlay(center, length, color){ <br />this._center = center; <br />this._length = length; <br />this._color = color; <br />} <br />// 继承API的BMap.Overlay <br /></td> </tr> </table>SquareOverlay.prototype = new BMap.Overlay();<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy2932')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2932><pre class="brush:php;toolbar:false;">// 实现初始化方法 <br />SquareOverlay.prototype.initialize = function(map){ <br />// 保存map对象实例 <br /> this._map = map; <br /> // 创建div元素，作为自定义覆盖物的容器 <br /> var div = document.createElement("div"); <br /> div.style.position = "absolute"; <br /> // 可以根据参数设置元素外观 <br /> div.style.width = this._length + "px"; <br /> div.style.height = this._length + "px"; <br /> div.style.background = this._color; <br /> // 将div添加到覆盖物容器中 <br /> map.getPanes().markerPane.appendChild(div); <br /> // 保存div实例 <br /> this._div = div; <br /> // 需要将div元素作为方法的返回值，当调用该覆盖物的show、 <br /> // hide方法，或者对覆盖物进行移除时，API都将操作此元素。 <br /> return div; <br />}<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy2750')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2750><pre class="brush:php;toolbar:false;">// 实现绘制方法 <br />SquareOverlay.prototype.draw = function(){ <br />// 根据地理坐标转换为像素坐标，并设置给容器 <br /> var position = this._map.pointToOverlayPixel(this._center);<br /> this._div.style.left = position.x - this._length / 2 + "px"; <br /> this._div.style.top = position.y - this._length / 2 + "px"; <br />}<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy9190')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy9190><pre class="brush:php;toolbar:false;">//添加自定义覆盖物 <br />var mySquare = new SquareOverlay(map.getCenter(), 100, "red"); <br />map.addOverlay(mySquare);<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy7000')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7000><pre class="brush:php;toolbar:false;">SquareOverlay.prototype.show = function(){ <br /> if (this._div){ <br /> this._div.style.display = ""; <br /> } <br />}<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy6460')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6460><pre class="brush:php;toolbar:false;">mySquare.show();// 实现隐藏方法 <br /><table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy1269')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy1269>SquareOverlay.prototype.hide = function(){ <br />if (this._div){ <br />this._div.style.display = "none"; <br />} <br />}</td> </tr> </table>添加完以上code，只需使用这句话，即可隐藏覆盖物。mySquare.hide();
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy6320')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6320><pre class="brush:php;toolbar:false;">SquareOverlay.prototype.yellow = function(){ <br /> if (this._div){ <br /> this._div.style.background = "yellow"; <br /> } <br />}mySquare.yellow();
那么，我们需要在html里，先写出map的容器，和3个按钮。<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="max-width:90%"> <tr> <td width="464" style="max-width:90%" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy3259')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy3259><pre class="brush:php;toolbar:false;"><div style="width:520px;height:340px;border:1px solid gray" id="container"></div><br /><p><br /> <input type="button" value="移除覆盖物" onclick="mySquare.hide();" /><br /> <input type="button" value="显示覆盖物" onclick="mySquare.show();" /><br /> <input type="button" value="变成黄色" onclick="mySquare.yellow();" /><br /></p><table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy4395')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4395><pre class="brush:php;toolbar:false;">// 实现显示方法 <br />SquareOverlay.prototype.show = function(){ <br /> if (this._div){ <br /> this._div.style.display = ""; <br /> } <br />} <br />// 实现隐藏方法 <br />SquareOverlay.prototype.hide = function(){ <br /> if (this._div){ <br /> this._div.style.display = "none"; <br /> } <br />}<br /><br />//改变颜色的方法<br />SquareOverlay.prototype.yellow = function(){ <br /> if (this._div){ <br /> this._div.style.background = "yellow"; <br /> } <br />}<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy3545')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy3545><pre class="brush:php;toolbar:false;">SquareOverlay.prototype.addEventListener = function(event,fun){<br /> this._div['on'+event] = fun;<br />}<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy6298')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6298><pre class="brush:php;toolbar:false;">mySquare.addEventListener('click',function(){<br /> alert('click');<br />});<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy2793')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2793><pre class="brush:php;toolbar:false;">mySquare.addEventListener('mousemover',function(){<br /> alert('鼠标移上来了');<br />});<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy9563')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy9563>1 <!DOCTYPE html><br />2 <html><br />3 <head><br />4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />5 <title>自定义覆盖物的点击事件</title><br />6 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script><br />7 </head><br />8 <body><br />9 <div style="width:520px;height:340px;border:1px solid gray" id="container"></div><br />10 <p><br />11 <input type="button" value="移除覆盖物" onclick="mySquare.hide();" /><br />12 <input type="button" value="显示覆盖物" onclick="mySquare.show();" /><br />13 <input type="button" value="变成黄色" onclick="mySquare.yellow();" /><br />14 </p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/2100">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680086070100.png" alt="度加剪辑">
</a>
<div class="aritcle_card_info">
<a href="/ai/2100">度加剪辑</a>
<p>度加剪辑（原度咔剪辑），百度旗下AI创作工具</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="度加剪辑">
<span>63</span>
</div>
</div>
<a href="/ai/2100" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="度加剪辑">
</a>
</div>
<br />15 </body><br />16 </html><br />17 <script type="text/javascript"><br />18 var map = new BMap.Map("container"); // 创建Map实例<br />19 var point = new BMap.Point(116.404, 39.915); // 创建点坐标<br />20 map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。<br />21 <br />22 //1、定义构造函数并继承Overlay<br />23 // 定义自定义覆盖物的构造函数 <br />24 function SquareOverlay(center, length, color){ <br />25 this._center = center; <br />26 this._length = length; <br />27 this._color = color; <br />28 } <br />29 // 继承API的BMap.Overlay <br />30 SquareOverlay.prototype = new BMap.Overlay(); <br />31 <br />32 //2、初始化自定义覆盖物<br />33 // 实现初始化方法 <br />34 SquareOverlay.prototype.initialize = function(map){ <br />35 // 保存map对象实例 <br />36 this._map = map; <br />37 // 创建div元素，作为自定义覆盖物的容器 <br />38 var div = document.createElement("div"); <br />39 div.style.position = "absolute"; <br />40 // 可以根据参数设置元素外观 <br />41 div.style.width = this._length + "px"; <br />42 div.style.height = this._length + "px"; <br />43 div.style.background = this._color; <br />44 // 将div添加到覆盖物容器中 <br />45 map.getPanes().markerPane.appendChild(div); <br />46 // 保存div实例 <br />47 this._div = div; <br />48 // 需要将div元素作为方法的返回值，当调用该覆盖物的show、 <br />49 // hide方法，或者对覆盖物进行移除时，API都将操作此元素。 <br />50 return div; <br />51 }<br />52 <br />53 //3、绘制覆盖物<br />54 // 实现绘制方法 <br />55 SquareOverlay.prototype.draw = function(){ <br />56 // 根据地理坐标转换为像素坐标，并设置给容器 <br />57 var position = this._map.pointToOverlayPixel(this._center);<br />58 this._div.style.left = position.x - this._length / 2 + "px"; <br />59 this._div.style.top = position.y - this._length / 2 + "px"; <br />60 }<br />61 <br />62 //4、显示和隐藏覆盖物<br />63 // 实现显示方法 <br />64 SquareOverlay.prototype.show = function(){ <br />65 if (this._div){ <br />66 this._div.style.display = ""; <br />67 } <br />68 } <br />69 // 实现隐藏方法 <br />70 SquareOverlay.prototype.hide = function(){ <br />71 if (this._div){ <br />72 this._div.style.display = "none"; <br />73 } <br />74 }<br />75 <br />76 //5、添加其他覆盖物方法<br />77 //比如，改变颜色 <br />78 SquareOverlay.prototype.yellow = function(){ <br />79 if (this._div){ <br />80 this._div.style.background = "yellow"; <br />81 } <br />82 }<br />83 <br />84 //6、自定义覆盖物添加事件方法<br />85 SquareOverlay.prototype.addEventListener = function(event,fun){<br />86 this._div['on'+event] = fun;<br />87 }<br />88 <br />89 //7、添加自定义覆盖物 <br />90 var mySquare = new SquareOverlay(map.getCenter(), 100, "red"); <br />91 map.addOverlay(mySquare);<br />92 <br />93 //8、 为自定义覆盖物添加点击事件<br />94 mySquare.addEventListener('click',function(){<br />95 alert('click');<br />96 });<br />97 </script></td> </tr> </table>八、感谢大家支持！
百度地图作为新一代人工智能地图，服务覆盖全球200+城市及国家。导航可信赖、语音交互更简单、数据丰富更贴心的百度地图，致力于为用户提供更准确、更丰富、更易用的出行服务。有需要的小伙伴快来保存下载体验吧！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
747
收藏
