第1行: | 第1行: | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
− | <div class="h1-title">地图事件</div><div id="update- | + | <div class="h1-title">地图事件</div><div id="update-time1">更新时间:2020年08月07日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text"> |
− | + | 浏览器中的JavaScript是“事件驱动的”,这表示JavaScript通过生成事件来响应交互,并期望程序能够“监听”感兴趣的活动。例如,在浏览器中,用户的鼠标和键盘交互可以创建在DOM内传播的事件。根据需求对这些事件注册JavaScript事件监听器,并在接收这些事件时执行代码。<br/>百度地图API拥有一个自己的事件模型,程序员可监听地图API对象的自定义事件,使用方法和DOM事件类似。但请注意,地图API事件是独立的,与标准DOM事件不同。可以点击下图体验。 | |
− | + | </div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/kMapClickEvent.htm"></div><div class="top_right">[http://lbsyun.baidu.com/jsdemo.htm#kMapClickEvent DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>事件监听</span></div></div></div><div class="serve-explain-text"> | |
− | </div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/kMapClickEvent.htm"></div><div class="top_right">[http://lbsyun.baidu.com/jsdemo.htm#kMapClickEvent DEMO详情]</div></div><div class="bluetitle"><div class=" | + | 百度地图API中的大部分对象都含有addEventListener方法,您可以通过该方法来监听对象事件。例如,BMapGL.Map包含click、dblclick等事件。在特定环境下这些事件会被触发,同时监听函数会得到相应的事件参数e,比如当用户点击地图时,e参数会包含鼠标所对应的地理位置latlng。 |
− | + | ||
</div><div class="devguide"><div class="leftborderbg" style="height:950px;"></div><div class="devguideorder"><span>1</span>参考展示地图创建基本地图</div><div class="devguidecenter"></div><div class="devguideorder"><span>2</span>监听地图的单击事件</div><div class="devguidecenter"> | </div><div class="devguide"><div class="leftborderbg" style="height:950px;"></div><div class="devguideorder"><span>1</span>参考展示地图创建基本地图</div><div class="devguidecenter"></div><div class="devguideorder"><span>2</span>监听地图的单击事件</div><div class="devguidecenter"> | ||
− | + | addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。 如下示例中,每当用户点击地图时,会弹出一个警告框: | |
<pre class="prettyprint codestyle">map.addEventListener('click', function(e) { | <pre class="prettyprint codestyle">map.addEventListener('click', function(e) { | ||
alert('click!') | alert('click!') | ||
− | + | }); | |
− | + | </pre> | |
</div><div class="devguideorder"><span>3</span>在回调函数中添加一些逻辑</div><div class="devguidecenter"> | </div><div class="devguideorder"><span>3</span>在回调函数中添加一些逻辑</div><div class="devguidecenter"> | ||
− | + | 通过回调函数的参数,可以获取当前点击点的经纬度信息,下面的例子弹出了获取的经纬度,和转换后的墨卡托坐标地址。 | |
<pre class="prettyprint codestyle">map.addEventListener('click', function(e) { | <pre class="prettyprint codestyle">map.addEventListener('click', function(e) { | ||
− | + | alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat); | |
− | + | var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat); | |
− | + | alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]); | |
− | + | }); | |
− | + | </pre> | |
</div><div class="devguideorder"><span>4</span>移除事件监听</div><div class="devguidecenter"> | </div><div class="devguideorder"><span>4</span>移除事件监听</div><div class="devguidecenter"> | ||
− | + | 可以通过removeEventListener方法移除对事件的监听。 | |
<pre class="prettyprint codestyle">map.addEventListener('click', handleClick); | <pre class="prettyprint codestyle">map.addEventListener('click', handleClick); | ||
− | + | function handleClick (e) { | |
− | + | alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat); | |
− | + | var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat); | |
− | + | alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]); | |
− | + | } | |
− | + | map.removeEventListener('click', handleClick);</pre> | |
</div></div> | </div></div> |
2022年8月19日 (五) 13:28的最后版本
地图事件
更新时间:2020年08月07日
简介
浏览器中的JavaScript是“事件驱动的”,这表示JavaScript通过生成事件来响应交互,并期望程序能够“监听”感兴趣的活动。例如,在浏览器中,用户的鼠标和键盘交互可以创建在DOM内传播的事件。根据需求对这些事件注册JavaScript事件监听器,并在接收这些事件时执行代码。
百度地图API拥有一个自己的事件模型,程序员可监听地图API对象的自定义事件,使用方法和DOM事件类似。但请注意,地图API事件是独立的,与标准DOM事件不同。可以点击下图体验。
事件监听
百度地图API中的大部分对象都含有addEventListener方法,您可以通过该方法来监听对象事件。例如,BMapGL.Map包含click、dblclick等事件。在特定环境下这些事件会被触发,同时监听函数会得到相应的事件参数e,比如当用户点击地图时,e参数会包含鼠标所对应的地理位置latlng。
1参考展示地图创建基本地图
2监听地图的单击事件
addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。 如下示例中,每当用户点击地图时,会弹出一个警告框:
map.addEventListener('click', function(e) { alert('click!') });
3在回调函数中添加一些逻辑
通过回调函数的参数,可以获取当前点击点的经纬度信息,下面的例子弹出了获取的经纬度,和转换后的墨卡托坐标地址。
map.addEventListener('click', function(e) { alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat); var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat); alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]); });
4移除事件监听
可以通过removeEventListener方法移除对事件的监听。
map.addEventListener('click', handleClick); function handleClick (e) { alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat); var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat); alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]); } map.removeEventListener('click', handleClick);