zoukankan      html  css  js  c++  java
  • 【百度地图事件监听】

    在运用百度地图API时,需要监听地图的点击事件。发现一个问题。

     

     

    百度地图关于事件的描述:

     
     

    地图事件概述

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

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

    事件监听

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

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

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

    1. var map=newBMap.Map("container");
    2. map.centerAndZoom(newBMap.Point(116.404,39.915),11);
    3. map.addEventListener("click", function(){
    4. alert("您点击了地图。");
    5. });
     

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

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

    事件参数和this

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

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

    1. var map=newBMap.Map("container");
    2. map.centerAndZoom(newBMap.Point(116.404,39.915),11);
    3. map.addEventListener("click", function(e){
    4. alert(e.point.lng +", "+ e.point.lat);
    5. });
     

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

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

    移除监听事件

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

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

    1. var map=newBMap.Map("container");
    2. map.centerAndZoom(newBMap.Point(116.404,39.915),11);
    3. function showInfo(e){
    4. alert(e.point.lng +", "+ e.point.lat);
    5. map.removeEventListener("click", showInfo);
    6. }
    7. map.addEventListener("click", showInfo);
     
     
    但是我发现当触发addEventListener两次时, removeEventListener就无效了。:
     
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    6. <style type="text/css">
    7. html,body {height:100%;}
    8. #allmap {width:100%;height:50%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    9. }
    10. </style>
    11. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    12. <script src="http://api.map.baidu.com/api?v=2.0&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script>
    13. <title>给覆盖物添加右键菜单</title>
    14. </head>
    15. <body>
    16. <div id="allmap"></div>
    17. <input type="button" value="点击绘制圆"class="add">
    18. <input type="button" value="取消绘制圆"class="remove">
    19. </body>
    20. </html>
    21. <script type="text/javascript">
    22. // 百度地图API功能
    23. var map =newBMap.Map("allmap");
    24. var point =newBMap.Point(116.404,39.915);
    25. map.centerAndZoom(point,15);
    26. radiusNum =500;
    27. function showInfo(e){
    28. //alert(e.point.lng + ", " + e.point.lat);
    29. console.log('showInfo');
    30. map.clearOverlays();
    31. circlePoint =newBMap.Point(e.point.lng, e.point.lat);// 创建点坐标
    32. var circle =newBMap.Circle(circlePoint, radiusNum,{
    33. strokeColor:"blue",
    34. strokeWeight:2,
    35. strokeOpacity:0.5
    36. });//创建圆
    37. map.addOverlay(circle);//增加圆
    38. }
    39. function addClick(){
    40. console.log("addClick");
    41. map.addEventListener("click",showInfo);
    42. }
    43. function removeClick(){
    44. console.log("removeClick");
    45. map.removeEventListener("click",showInfo);
    46. }

    47. $(".add").on('click',addClick);
    48. $(".remove").on('click',removeClick);
    49. </script>
    Q:如何解决这个问题呢?
    A:目前想到的只有在showInfo函数中末尾处添加 
    1. map.removeEventListener("click",showInfo);
    但是这样就只能添加圆一次。
     





  • 相关阅读:
    竞赛备考建议
    谷山丰的一生
    从首个IMO季军谈起 作者 : 付云皓
    孔庆东:单刀赴高考
    LaTeX 技巧 802:国内期刊 CCT 模板编译经验
    数学书籍推荐
    翻译
    printf中用法详解
    黎活明给程序员的忠告【转】
    log4j2配置文件log4j2.xml详解(转载)
  • 原文地址:https://www.cnblogs.com/moyuling/p/4988620.html
Copyright © 2011-2022 走看看