百度地图之事件处理——获取所在的经纬度(百度地图简单使用)

地图事件概述 

  浏览器中的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);

实例:

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

<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>

  感谢您的阅读!

时间: 2024-08-04 10:17:24

百度地图之事件处理——获取所在的经纬度(百度地图简单使用)的相关文章

百度地图公交线路查询,并绘制到地图上并获取所有路径经纬度点(可供echarts 路径图使用)

github地址 https://github.com/a1115040996/MyHTML/tree/gh-pages/BDMap 源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

地图篇-01.获取用户位置

地图篇-01.获取用户位置 今天把地图整理了一下,共享出来和大家一起分享,希望帮助到不了解的朋友,当然很精通的朋友希望指正小生的不足. 1.说到地图,首先要接触一个framework -CoreLocation.framework 创建一个项目 点击"+"号之后,跳转到下个界面 导入完毕 2.原理: 大家平时在使用iPhone时,每下载一个App,第一次打开的时候,都会有这样的提示 是吧,这时候我们如果选择了不允许的话,这个App是获取不了我们的位置的,相应的App里面涉及到位置的功能

百度地图定位 : 获取当前位置的经纬度

说明: 1.初始化 BaiduMap SDK要在显示界面之前,即: SDKInitializer.initialize(Context); setContentView(R.layout.main); 2. 设置定位的模式是 LocationMode.Hight_Accuracy 时,在室内可能无法获取到准确的经纬度,会得到默认的值是4.9E-324 处理办法是将模式改为Battery_Saving,或到室外 3.可以根据当前设备网络连接情况和GPS是否开启来设定定位模式 //获得网络连接情况

用户Ip地址和百度地图api接口获取用户地理位置(经纬度坐标,城市)

<?php //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){ if(!empty($_SERVER["HTTP_CLIENT_IP"])){ $cip = $_SERVER["HTTP_CLIENT_IP"]; } else if(!empty($_SERVER["HTTP_X_FORWARDED_FOR"])){ $cip = $_SERVER[&quo

利用百度地图API,获取经纬度坐标

利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代码下载:http://files.cnblogs.com/zjfree/select_map.rar 利用百度地图API,获取经纬度坐标,布布扣,bubuko.com

android百度地图开发之自动定位所在位置与固定位置进行驾车,步行,公交路线搜索

最近跟着百度地图API学地图开发,先是学了路径搜索,对于已知坐标的两点进行驾车.公交.步行三种路径的搜索(公交路径运行没效果,待学习中),后来又 学了定位功能,能够获取到自己所在位置的经纬度,但当将两者合起来先自动获取自己所在位置的经纬度然后与固定地点进行路径搜索时却弄不出来了,因为刚开始 写的两者在两个类中总是取不到经纬度值,后来将两者写到同一个类中去了,终于取到经纬度值了,也运行出来了.需要 在 BDLocationListener的onReceiveLocation里获取到经纬度值,因为已

百度定位SDK实现获取当前经纬度及位置

使用Android自带的LocationManager和Location获取位置的时候,经常会有获取的location为null的情况,并且操作起来也不是很方便,在这个Demo里我使用了百度地图API中的定位SDK,可以一次性获取当前位置经纬度以及详细地址信息,还可以获取周边POI信息,同时可以设定位置通知点,当到达某一位置时,发出通知信息等方式来告知用户.jar包下载以及官方文档请参照:百度定位SDK,前提是需要注册百度开发者账号.下面来看看定位的基本原理,目前,定位SDK可以通过GPS.基站

简单的百度地图点击获取当前地理坐标

在很多的时候我们需要在地图上点击一个地方,然后获取当前地点的经度和纬度值,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地图API地点搜索-获取经纬度DEMO</title> <meta name="

Android获取定位权限,获取设备所在的经纬度

转载请标明出处:http://www.cnblogs.com/tangZH/p/8969898.html  前言: 有时候我们仅仅是想要获取设备所在的经纬度,那么直接调用Android相关的api就可以了,不需要去接入高德地图或者谷歌地图等等. 一.获取定位服务 private LocationManager locationManager; locationManager = (LocationManager) mContext.getSystemService(Context.LOCATIO