百度地图API-给自定义覆盖物添加事件方法_PHP教程
程序员文章站
2022-04-24 17:11:49
...
本文章简单的介绍了一下关于百度地图的应用,这里我介绍一个功能就是在自己定的层上给加个事件方法,有需要的参考一下。
SquareOverlay.prototype = new BMap.Overlay();二、初始化自定义覆盖物
三、绘制覆盖物
四、添加覆盖物
五、给自定义覆盖物添加事件1、显示事件
添加完以上显示覆盖物事件后,只需要下面这句话,就可以显示覆盖物了。
2、隐藏覆盖物
添加完以上code,只需使用这句话,即可隐藏覆盖物。
上面这句话,是把覆盖物的背景颜色改成黄色,使用以下语句即可生效:
然后,在javascript中,添加这三个函数:
六、如何给自定义覆盖物添加点击事件(这章重要!很多人问的)比如,我们给自定义覆盖物点击click事件。首先,需要添加一个addEventListener 的事件。如下:
再写该函数里面的参数,比如click。这样就跟百度地图API里面的覆盖物事件一样了。
同理,添加完毕addEventListener之后,还可以添加其他鼠标事件,比如mouseover。
七、全部源代码自定义覆盖物
八、感谢大家支持!API常见问题总结贴:http://tieba.baidu.com/p/1147019448
给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.show = function(){ |
代码如下 | 复制代码 |
mySquare.show(); |
// 实现隐藏方法
代码如下 | 复制代码 |
SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } } |
mySquare.hide();3、改变覆盖物颜色
代码如下 | 复制代码 |
SquareOverlay.prototype.yellow = function(){ |
mySquare.yellow();“第五部分、给覆盖物添加事件”小结:我们在地图上添加了一个红色覆盖物,然后分别添加“显示、隐藏、改变颜色”的事件。示意图如下:那么,我们需要在html里,先写出map的容器,和3个按钮。
代码如下 | 复制代码 |
代码如下 | 复制代码 |
// 实现显示方法 |
六、如何给自定义覆盖物添加点击事件(这章重要!很多人问的)比如,我们给自定义覆盖物点击click事件。首先,需要添加一个addEventListener 的事件。如下:
代码如下 | 复制代码 |
SquareOverlay.prototype.addEventListener = function(event,fun){ |
代码如下 | 复制代码 |
mySquare.addEventListener('click',function(){ |
代码如下 | 复制代码 |
mySquare.addEventListener('mousemover',function(){ |
代码如下 | 复制代码 |
1 2 3 4 5 6 7 8 9 10
15 16 17 |