Making AJAX requests when a Map is changed by the user with the Google Maps Javascript API
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:
- Google Maps Javascript API V3 Reference: Map Class
i think you need use an listener... in this case an event listener..
gmaps events reference
if you use v3 search on v3 reference for listeners
this is a list of Gevents-> here
probably are not listed all
加载中,请稍侯......
精彩评论