javascript - 当用户使用 Google Maps Javascript API 更改 map 时发出 AJAX 请求

标签 javascript google-maps google-maps-api-3 dom-events

我正在使用 ASP.NET MVC 构建一个网站,其中一个功能是使用 Google Maps Javascript API 在 Google map 上显示一些点。因为我有很多点,我不想把它们全部拿走;相反,我只想获取用户正在 map (边界框)上查看的当前 View 区域中的那些。

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

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

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

最佳答案

看起来您正在寻找 idle 事件:

This event is fired when the map becomes idle after panning or zooming.

例子:

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

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

关于javascript - 当用户使用 Google Maps Javascript API 更改 map 时发出 AJAX 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3074130/

相关文章:

javascript - 从JAVA6中的javascript引擎库调用Stanford javascript库加密函数的问题

javascript - 未知提供者 : $q in an AngularJS application

javascript - 禁用谷歌地图上的缩放和链接

google-maps-api-3 - 限制地理编码到一个国家

google-maps - 谷歌地图自定义控件定位

javascript - 拆分窗口位置 URL 并与数据属性值 JOIN 并刷新​​页面

ios - MapKit 中的 MapTypeStyle

php - 如何通过特定国家/地区的邮政编码在谷歌地图上查找地点

reactjs - 类型 'google' 上不存在属性 'Window'

javascript - 导航栏上的 Jquery 下拉菜单无法正常工作