百度地图API-给自定义覆盖物添加事件方法-php手册-php.cn

Home

php教程

php手册

百度地图API-给自定义覆盖物添加事件方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 11:26 AM

one timeeventaboutmapapplicationarticlemethodAdd toBaiduofSimplecustomizecover

本文章简单的介绍了一下关于百度地图的应用，这里我介绍一个功能就是在自己定的层上给加个事件方法，有需要的参考一下。

给marker、lable、circle等Overlay添加事件很简单，直接addEventListener即可。那么，自定义覆盖物的事件应该如何添加呢？我们一起来看一看~

-----------------------------------------------------------------------------------------一、定义构造函数并继承Overlay

代码如下	复制代码
// 定义自定义覆盖物的构造函数 function SquareOverlay(center, length, color){ this._center = center; this._length = length; this._color = color; } // 继承API的BMap.Overlay

SquareOverlay.prototype = new BMap.Overlay();二、初始化自定义覆盖物

代码如下

复制代码

// 实现初始化方法  <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>}

三、绘制覆盖物

代码如下

复制代码

// 实现绘制方法  <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>}

四、添加覆盖物

代码如下	复制代码
//添加自定义覆盖物 <br>var mySquare = new SquareOverlay(map.getCenter(), 100, "red"); <br>map.addOverlay(mySquare);

五、给自定义覆盖物添加事件1、显示事件

代码如下	复制代码
SquareOverlay.prototype.show = function(){ <br> if (this._div){ <br> this._div.style.display = ""; <br> } <br>}

添加完以上显示覆盖物事件后，只需要下面这句话，就可以显示覆盖物了。

代码如下	复制代码
mySquare.show();

2、隐藏覆盖物

// 实现隐藏方法  <br>

代码如下	复制代码
SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } }

添加完以上code，只需使用这句话，即可隐藏覆盖物。

mySquare.hide();

3、改变覆盖物颜色

代码如下	复制代码
SquareOverlay.prototype.yellow = function(){ <br> if (this._div){ <br> this._div.style.background = "yellow"; <br> } <br>}

上面这句话，是把覆盖物的背景颜色改成黄色，使用以下语句即可生效：

mySquare.yellow();

“第五部分、给覆盖物添加事件”小结：我们在地图上添加了一个红色覆盖物，然后分别添加“显示、隐藏、改变颜色”的事件。示意图如下：那么，我们需要在html里，先写出map的容器，和3个按钮。

代码如下

复制代码

<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>

然后，在javascript中，添加这三个函数：

代码如下

复制代码

// 实现显示方法  
SquareOverlay.prototype.show = function(){  <br> if (this._div){  <br>   this._div.style.display = "";  <br> }  <br>}    
// 实现隐藏方法  <br>SquareOverlay.prototype.hide = function(){  
 if (this._div){  
   this._div.style.display = "none";  
 }  
}

//改变颜色的方法
SquareOverlay.prototype.yellow = function(){  <br> if (this._div){  <br>    this._div.style.background = "yellow"; <br> }     <br>}

六、如何给自定义覆盖物添加点击事件（这章重要！很多人问的）比如，我们给自定义覆盖物点击click事件。首先，需要添加一个addEventListener 的事件。如下：

代码如下	复制代码
SquareOverlay.prototype.addEventListener = function(event,fun){<br> this._div['on'+event] = fun;<br>}

再写该函数里面的参数，比如click。这样就跟百度地图API里面的覆盖物事件一样了。

代码如下	复制代码
mySquare.addEventListener('click',function(){<br> alert('click');<br>});

同理，添加完毕addEventListener之后，还可以添加其他鼠标事件，比如mouseover。

代码如下	复制代码
mySquare.addEventListener('mousemover',function(){<br> alert('鼠标移上来了');<br>});

七、全部源代码自定义覆盖物

代码如下	复制代码
1 2 3 4 5 自定义覆盖物的点击事件 6 7 8 9 10 11 12 13 14 15 16 17

八、感谢大家支持！API常见问题总结贴：http://tieba.baidu.com/p/1147019448

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks agoByDDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks agoByDDD

Roblox: Dead Rails - How To Tame Wolves

4 weeks agoByDDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks agoByDDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),