【百度地图API】如何判断点击的是地图还是覆盖物?

原文:【百度地图API】如何判断点击的是地图还是覆盖物?

摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看。

------------------------------------------------------------

先看看地图有哪些事件,查看官网类参考,翻到事件

大家看到这里的参数了麽?

其实,在点击物体时,通过这些参数就能够判断所点击的物体是什么了。

用marker举例:

先创建一个marker

//覆盖物Marker
    var pmk = new BMap.Point(116.249472,39.946583);
    var mk = new BMap.Marker(pmk);
    map.addOverlay(mk);

然后对地图添加点击事件,如果判断出来是覆盖物,就弹出相应的对话框。

    map.addEventListener("click",function(e){
        if(e.overlay){
            alert(‘你点击的是覆盖物:‘+e.overlay.toString());
        }else{
            alert(‘你点击的是地图‘);
        }
    });

添加一堆覆盖物,然后给每个覆盖物写点击事件。

比如我点击了多边形,就会弹出这个。

全部源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击事件</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=v=1.3"></script>
</head>

<body>
  <!--百度地图容器-->
  <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("dituContent");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    map.enableScrollWheelZoom();

    map.addEventListener("click",function(e){
        if(e.overlay){
            alert(‘你点击的是覆盖物:‘+e.overlay.toString());
        }else{
            alert(‘你点击的是地图‘);
        }
    });

    //覆盖物Marker
    var pmk = new BMap.Point(116.249472,39.946583);
    var mk = new BMap.Marker(pmk);
    map.addOverlay(mk);

    //覆盖物Label
    var plb = new BMap.Point(116.408149,39.958087);
    var lb = new BMap.Label(‘我是覆盖物Label‘,{point:plb});
    map.addOverlay(lb);

    //覆盖物Polyline
    var pl = new BMap.Polyline([new BMap.Point(116.250047,39.919583),new BMap.Point(116.441494,39.919583)],{strokeWeight:10})
    map.addOverlay(pl);

    //覆盖物Polygon
    var pg = new BMap.Polygon([new BMap.Point(116.248323,39.893016),new BMap.Point(116.440344,39.893016),new BMap.Point(116.440344,39.811036),new BMap.Point(116.248323,39.811036)]);
    map.addOverlay(pg);

</script>
</html>
时间: 2024-08-26 09:00:19

【百度地图API】如何判断点击的是地图还是覆盖物?的相关文章

【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈

原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快来看此文吧! --------------------------------------------- 一.制作魔兽地图的准备工作 其实,你只需要准备一些地图的瓦片图,就可以了. 用切片工具,把一张完整的图片(最好大一些,清楚一些),切成小片.(下周我贴这个工具的下载链接出来.留个悬念,哈哈.) 正式公布切图工具链接: http://openapi.baidu.co

2017高德地图API WEB开发(key申请,地图搭建)简约教程

前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德地图开发平台" 通过"百度搜索 "或者"谷歌搜索 " 高德地图然后会有一个高德开发平台|高德地图apl 2.登录高德开发平台 这是高德开发平台的官网,然后点击登录,没有注册就好 3.进入控制台创建新应用 进入控制台之后选择"应用管理"然后点

百度地图Api进阶教程-点击生成和拖动标注4.html

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1

javascript 调用谷歌地图API 输入地址 点击弹出悬浮信息

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></

百度地图API和高德地图API资料集锦

[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 [高德地图API]从零开始学高德JS API(二)地图控件与插件--测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 [高德地图API]从零开始学高德JS API

使用百度地图API进行Android地图应用开发(Eclipse)

随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. 本文讨论怎样导入百度地图SDK. 主要分为server端配置和client配置. (1)首先要有一个百度账号,账号能够去百度官网申请,然后登陆:http://developer.baidu.com/map/index.php? title=%E9%A6%96%E9%A1%B5   .使用自己的账号p

百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和DOM编程里的事件模型一样,百度地图API也提供了类似的事件机制.本文介绍了事件监听的添加和移除方法,this指针和事件参数的使用以及绑定事件监听函数中涉及的闭包问题,最后分享了一个用来增强地图API事件机制的开源项目. 事件添加和移除 我们最简单的事件开始,下面的代码示例给map对象添加了click事件的监听

【百度地图API】手机浏览器抓包工具及其使用方法

原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. ------------------------------------------------------ 一.手机浏览器抓包工具 Paros 3.2.13 二.如何配置 1.将电脑和手机连到同一个wifi环境中 2.找到电脑的IP 可以点击网卡图标,找到IP信息 也可以在cmd下,使用ipconfi

Android 百度地图API 定位 导航

看看这个利用百度地图定位并实现目的地导航的Demo.首先看实现效果:                          进 入后首先会得到当前位置,在地图上显示出来,在输入框中输入目的地后,就会在地图上出现最佳线路,我这里设置的是距离最小的驾车线路,另外还有公交线路. 步行线路,在代码中都有详细注释.另外,在控制台还输出了线路上每一个节点的信息以及起始位置和目的地的距离,信息显示的是在当前节点的导航信息.如下 图: 接下来就看如何实现了,首先,注册百度开发者账号,并进入百度地图API查看相关资料