从坐标数组中，我如何决定以哪个坐标为中心？

Question

Assuming I am working with the following JSON of locations:

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

I am plotting these on a Google Map and I'd like to center on roughly the one in the middle.

Is there a function in the Google maps api for doing this? Or must I work out the average myself?

I have written a function which I can pass the JSON and a zoom level to:

function initialize_map(places, zoom) {

    // use first coordinates in the json to initiate the map
    var place_lat_lng = new google.maps.LatLng(places[0][1],places[0][2]);

    var mapOptions = {
          zoom: zoom,
          center: place_lat_lng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

    var marker, i; 

    // loop through all the places to get markers
    for (var i=0;i<places.length;i++)
    { 
        var place = places[i];

         marker = new google.maps.Marker({
            position: new google.maps.LatLng(place[1], place[2]),
            map: map,
            animation: google.maps.Animation.DROP
        });
        // add the marker
        marker.setMap(map);            
    }   
}   

This function works, but it doesn't center, and markers will be out of view.

How would you go about centering the view, and having it so all the markers are visible?

Answer 1

The Google Maps API v3 contains a method for displaying a set of markers :

fitBounds(bounds:LatLngBounds) - None - Sets the viewport to contain the given bounds.

Add all your markers to a google.maps.LatLngBounds object, then call that method on your map object. Like this:

function initialize_map(places, zoom) {
     var bounds = new google.maps.LatLngBounds(); // empty bounds object

    // use first coordinates in the json to initiate the map
    var place_lat_lng = new google.maps.LatLng(places[0][1],places[0][2]);

    var mapOptions = {
          zoom: zoom,
          center: place_lat_lng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

    var marker, i; 

    // loop through all the places to get markers
    for (var i=0;i<places.length;i++)
    { 
        var place = places[i];

         marker = new google.maps.Marker({
            position: new google.maps.LatLng(place[1], place[2]),
            map: map,
            animation: google.maps.Animation.DROP
        });
        // add the marker
        marker.setMap(map);            
        bounds.extend(marker.getPosition()); // add the marker to the bounds

    }   

    map.fitBounds(bounds); // show all the markers.
}

Answer 2

Here's a quick way to add the markers to a LatLngBounds and grab the center of the box. This will at the very least show you all the markers you've got. The rectangle and 'C' marker are to show you what the bounding box and center look like.

var bounds = new google.maps.LatLngBounds();
for (x in beaches) {

    var data = beaches[x];       
    var lat = beaches[x][1];
    var lng = beaches[x][2]
    var latLng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        map: map,
        position: latLng
    });
    markers.push(marker);
    bounds.extend(latLng);
}

map.fitBounds(bounds)

new google.maps.Rectangle({
    bounds: bounds,
    fillColor: '#000000',
    map: map
})

var centerBounds = new google.maps.Marker({
    map: map,
    position: bounds.getCenter(),
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|FF0000|000000'
});