关于百度地图缩放和拖拽的回调函数

最新推荐文章于 2024-02-18 01:57:04 发布

原创最新推荐文章于 2024-02-18 01:57:04 发布 · 1.3w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #拖拽 #缩放 #回调

本文详细介绍了地图应用中的关键交互事件，包括缩放开始与结束、拖拽开始、过程及结束等事件的回调函数使用方法，并提供了具体的代码示例。

1.缩放的回调函数

zoomstart	{type, target}	地图更改缩放级别开始时触发触发此事件
zoomend	{type, target}	地图更改缩放级别结束时触发触发此事件

　　a、实现缩放动作开始时，返回地图中心点坐标：

map.addEventListener("zoomstart",
 function(evt){　　var cp
 = map.getCenter();   alert(cp.lng + "," +
 cp.lat);});

　　b、实现缩放结束获取当前地图bounds值：

map.addEventListener("zoomend",
 function(evt){

   var offsetPoint
 = new BMap.Pixel(evt.offsetX,
 evt.offsetY);   //记录鼠标当前点坐标<br>  
 alert(offsetPoint.x+","+offsetPointY);

});

2.拖拽的回调函数

dragstart	{type, target, pixel, point}	开始拖拽地图时触发
dragging	{type, target, pixel, point}	拖拽地图过程中触发
dragend	{type, target, pixel, point}	停止拖拽地图时触发

在<script></script>中引入相应代码　　

　　a、实现拖拽动作开始时，返回覆盖物的地理区域范围：

map.addEventListener("dragstart",
 function(evt){　

console.log(evt);

　var cp
 = map.getBounds(); 

console.log(evt);

});

　　b、实现拖拽过程中获取当前地图bounds值：

map.addEventListener("dragging",
 function(evt){

   var offsetPoint
 = new BMap.Pixel(evt.offsetX,
 evt.offsetY);   //记录鼠标当前点坐标<br>  
 alert(offsetPoint.x+","+offsetPointY);

});

　　 c、实现拖拽结束时，返回地图中心点坐标：

map.addEventListener("dragend",
 function showInfo(){

   var cp
 = map.getCenter();

   alert(cp.lng
 + "," +
 cp.lat);

});