从坐标数组中，如何确定以地图为中心的位置? [英] From an array of coordinates, how could I decide which to center the map on?

问题描述

假设我正在使用以下位置的JSON:

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]
];

我正在将这些绘图绘制在Google地图上，我想大致以中间的一个为中心.

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

Google maps api中是否有执行此操作的功能?还是我必须自己算出平均水平?

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

我编写了一个函数，可以将JSON和缩放级别传递给:

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?

推荐答案

GoogleMaps API v3包含一种用于显示一组标记的方法:

fitBounds(bounds:LatLngBounds)-无-将视口设置为包含给定的边界.

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

将所有标记添加到google.maps.LatLngBounds对象，然后在地图对象上调用该方法.像这样:

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.
}

这篇关于从坐标数组中，如何确定以地图为中心的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！