百度地图之事件处理——获取所在的经纬度(百度地图简单使用)
2015-07-29 20:21
447 查看
地图事件概述
浏览器中的JavaScript是“事件驱动的”,这表示JavaScript通过生成事件来响应交互,并期望程序能够“监听”感兴趣的活动。例 如,在浏览器中,用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器,并在接收 这些事件时执行代码。
百度地图API拥有一个自己的事件模型,程序员可监听地图API对象的自定义事件,使用方法和DOM事件类似。但请注意,地图API事件是独立的,与标准DOM事件不同。
有关地图API对象的事件,请参考完整的API参考文档。
addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。在下面示例中,每当用户点击地图时,会弹出一个警告框。
通过监听事件还可以捕获事件触发后的状态。下面示例显示用户拖动地图后地图中心的经纬度信息。
例如,通过参数e得到点击的经纬度坐标。
或者通过this得到地图缩放后的级别。
[b]移除监听事件
[/b]
当您不再希望监听事件时,可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。
下面示例中,用户第一次点击地图会触发事件监听函数,在函数内部对事件监听进行了移除,因此后续的点击操作则不会触发监听函数。
实例:
点击地图弹出所在的经纬度
感谢您的阅读!
浏览器中的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() + "级"); });
[b]移除监听事件
[/b]
当您不再希望监听事件时,可以将事件监听进行移除。每个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);
实例:
点击地图弹出所在的经纬度
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>地图单击事件</title> </head> <body> <div id="allmap"></div> <p>添加点击地图监听事件,点击地图后显示当前经纬度</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); function showInfo(e){ alert(e.point.lng + ", " + e.point.lat); } map.addEventListener("click", showInfo); </script>
感谢您的阅读!
相关文章推荐
- iOS 心形绘制
- [Swift] function pointer(address) as the parameter of function
- Python 选择排序
- Snail—UI学习之系统标签栏UITabBarController
- 浏览器渲染页面原理
- zoj 3735 概率dp
- 如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?
- android 的权限小记
- Catch That Cow
- HALCON算子函数——Chapter 16 : System
- VS2008 C++调用DLL 动态调用
- 【Unity3d】UGUI + Unity5.1开发碰到打IPA越狱包真机运行掉帧严重问题
- ftp上传文件、删除文件、下载文件的操作
- android小记
- Robot Motion
- 把握linux内核设计思想(七):内核定时器和定时执行
- hdu 5317 RGCDQ (素因子个数的GCD)
- HALCON算子函数——Chapter 17 : Tools
- [HTTP那些事] JSON数据
- 求有环单链表中的环长、环起点、链表长