博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度地图之事件处理——获取所在的经纬度(百度地图简单使用)
阅读量:4559 次
发布时间:2019-06-08

本文共 2159 字,大约阅读时间需要 7 分钟。

地图事件概述 

  浏览器中的JavaScript是“事件驱动的”,这表示JavaScript通过生成事件来响应交互,并期望程序能够“监听”感兴趣的活动。例 如,在浏览器中,用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器,并在接收 这些事件时执行代码。

  百度地图API拥有一个自己的事件模型,程序员可监听地图API对象的自定义事件,使用方法和DOM事件类似。但请注意,地图API事件是独立的,与标准DOM事件不同。

事件监听

  百度地图API中的大部分对象都含有addEventListener方法,您可以通过该方法来监听对象事件。例如,BMap.Map包含 click、dblclick等事件。在特定环境下这些事件会被触发,同时监听函数会得到相应的事件参数e,比如当用户点击地图时,e参数会包含鼠标所对 应的地理位置point。

有关地图API对象的事件,请参考完整的API参考文档。

  addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。在下面示例中,每当用户点击地图时,会弹出一个警告框

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("click", function(){     alert("您点击了地图。");    });

 

 

  通过监听事件还可以捕获事件触发后的状态。下面示例显示用户拖动地图后地图中心的经纬度信息。

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("dragend", function(){     var center = map.getCenter();     alert("地图中心点变更为:" + center.lng + ", " + center.lat);    });

 

 

事件参数和this

  在标准的DOM事件模型中(DOM Level 2 Events),监听函数会得到一个事件对象e,在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。 百度地图API的事件模型与此类似,在事件监听函数中传递事件对象e,每个e参数至少包含事件类型(type)和触发该事件的对象(target)。 API还保证函数内的this指向触发(同时也是绑定)事件的API对象。

  例如,通过参数e得到点击的经纬度坐标。

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("click", function(e){     alert(e.point.lng + ", " + e.point.lat);    });

 

 

  或者通过this得到地图缩放后的级别。

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("zoomend", function(){     alert("地图缩放至:" + this.getZoom() + "级");    });

 

移除监听事件

  当您不再希望监听事件时,可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。

  下面示例中,用户第一次点击地图会触发事件监听函数,在函数内部对事件监听进行了移除,因此后续的点击操作则不会触发监听函数。

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    function showInfo(e){     alert(e.point.lng + ", " + e.point.lat);     map.removeEventListener("click", showInfo);    }    map.addEventListener("click", showInfo);

 

 

实例:

  点击地图弹出所在的经纬度

    
地图单击事件

添加点击地图监听事件,点击地图后显示当前经纬度

 

 

  感谢您的阅读!

 

转载于:https://www.cnblogs.com/0201zcr/p/4687220.html

你可能感兴趣的文章
ps命令查看子进程
查看>>
2019春第七周编程总结
查看>>
angularjs1-7,http,location
查看>>
sass01
查看>>
Java 8 Lambda 表达式
查看>>
codeblocks 教程
查看>>
微信小微商户申请入驻
查看>>
Java的并发和多处理器的并行的理解
查看>>
1178.复数集合
查看>>
1174.查找第k小数
查看>>
优先队列(堆)
查看>>
C语言中函数参数传递的本质是值传递
查看>>
noip2018游记
查看>>
redis分布式锁
查看>>
判断手机andriod还是iphone
查看>>
POJ-2528 Mayor's posters (线段树区间更新+离散化)
查看>>
7.24
查看>>
软件工程开发项目作业
查看>>
nginx学习之——虚拟主机配置
查看>>
HBase数据导入导出工具
查看>>