用户使用Google Maps Javascript API更改地图时发出AJAX请求

Question

用户使用Google Maps Javascript API更改地图时发出AJAX请求

Max*_*sky 3 javascript google-maps google-maps-api-3 dom-events

我正在使用ASP.NET MVC构建一个网站,其中一个功能使用Google Maps Javascript API在Google地图上显示一些点.由于我有很多要点,我不想把它们全部拿走; 相反,我想只获得用户在地图上看到的当前视图区域中的那些区域(边界框).

为此,我将向我的C#代码发出一个AJAX请求,返回某个边界框内的所有点.但是,我需要以某种方式创建一个事件处理程序,每当用户平移或缩放地图时捕获该事件处理程序.

如何检测使用Google Maps Javascript API的地图何时被平移或缩放并触发事件处理程序？

提前致谢.

更新:我知道我必须实现一个事件监听器.有人能指出我可以用于Map对象的事件列表吗？click是那些事件之一,但有哪些与缩放和平移有关？

Answer 1

Dan*_*llo 5

看起来你正在寻找这个idle活动:

平移或缩放后地图变为空闲时会触发此事件.

例:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Events</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, 'idle', function() {
      var bounds = map.getBounds();

      console.log('North East: ' +
                  bounds.getNorthEast().lat() + ' ' + 
                  bounds.getNorthEast().lng());

      console.log('South West: ' +
                  bounds.getSouthWest().lat() + ' ' + 
                  bounds.getSouthWest().lng());

      // Your AJAX code in here ...
    });
  </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

此外,您还可以google.maps.Map从API参考中找到该对象导出的所有事件的列表:

Google Maps Javascript API V3参考:地图类

归档时间：	15 年，2 月前
查看次数：	1801 次
最近记录：	6 年，1 月前