Making AJAX requests when a Map is changed by the user with the Google Maps Javascript API_问答_开发者

Making AJAX requests when a Map is changed by the user with the Google Maps Javascript API

开发者 https://www.devze.com 2023-01-03 20:14 出处：网络

I\'m building a website with ASP.NET MVC where one feature displays some points on a Google map, using the Google Maps Javascript API. As I have a lot of points, I don\'t want to fetch them all; rathe

I'm building a website with ASP.NET MVC where one feature displays some points on a Google map, using the Google Maps Javascript API. As I have a lot of points, I don't want to fetch them all; rather, I want to get only the ones that are in the current view area that the user is looking at on the map (the boun开发者_StackOverflow中文版ding box).

To do that, I will make an AJAX request to my C# code that returns all the points inside a certain bounding box. However, I need to somehow create an event handler that catches whenever the map is panned or zoomed by the user.

How can I detect when a map using the Google Maps Javascript API is panned or zoomed and fire an event handler?

UPDATE: I know that I have to implement an event listener. Can someone point me towards a list of events that I can use for the Map object? click is one of those events, but what are the ones that relate to zooming and panning?

It looks like you're looking for the idle event:

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

Example:

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

In addition, you can find the list of all events exported by the google.maps.Map object from the API Reference: