Virtual Earth / Bing Maps - How To Calculate Best Zoom Level

问题:

I'm working on some map stuff and I'm stuck with something that seems to be quite basic.

The gist of what I'm doing is adding 10 flags to a map, and I need to dynamically set the zoom level and center of the map based on the position of the pins (map needs to be zoomed in as far as possible while still showing all pins).

This works exactly as expected with MultiMap without any intervention (as expected), but the Virtual Earth map doesn't play nice. If I don't give it a center Lat/Lon, it defaults to showing all of the USA.

Can anyone point me in the right direction in order to get this working?

EDIT:

Ok, I was able to calculate the proper center by using the following in my MVC Controller

''# we're going to rock the AVERAGE LAT/LON here Dim eventCount As Integer = 0 Dim totalLat As Double = 0 Dim totalLon As Double = 0 For Each mel In MapEventList     totalLat += mel.lat     totalLon += mel.lon     eventCount += 1 Next ViewData("centerLat") = totalLat / eventCount ViewData("centerLon") = totalLon / eventCount 

Now I'm just stuck trying to calculate the Best Zoom Level

EDIT 2:

So I've removed the calculations from my controller and added it to my Javascript. The weight of the script is quite light, but will have the calculations done by the client machine and not my server (valuable if/when the site starts getting piles of hits)

$(document).ready(function () {     // Load the Bing Map and populate it     var increment = 0; // used to increment event locations     var sumLat = 0; // used to find the average LAT location     var sumLon = 0; // used to find the average LON location      // Load the initial map     LoadMap();      // loop through all events and place a point on the map     // also add to the sumLat and sumLon variable     $.each(json_object, function () {         increment = ++increment;         sumLat = sumLat + this.lat;         sumLon = sumLon + this.lon;         LoadPoint(this.lat, this.lon, this.title, this.desc, increment);     });      // find the averate Lat and Lon for map centering     var centerLat = sumLat / increment;     var centerLon = sumLon / increment;     LatLon = new VELatLong(centerLat, centerLon);      // Set the new map Center based on the average of all points.     map.SetCenter(LatLon) });  function LoadMap() {     map = new VEMap('bingMap');     mapOptions = new VEMapOptions      // sets map options for asthetics     mapOptions.DashboardColor = "black";     mapOptions.EnableDashboardLabels = false;     mapOptions.EnableBirdseye = false;     mapOptions.EnableDashboardLabels = false;      // Load the initial map     // note: the LatLon is "null" at this point because we are going to      // center the map later based on the average of all points.     map.LoadMap(null, zoomLevel, null, null, null, false, null, mapOptions);  };  function LoadPoint(lat, lon, title, desc, pinId) {     var point = new VELatLong(lat, lon);     var pin = new VEShape(VEShapeType.Pushpin, point);     pin.SetTitle(title);     pin.SetDescription(desc + "<br /><br />lat: " + lat + " lon: " + lon);     pin.SetCustomIcon("<div class='pinStyle'><div class='pinText'>" + pinId + "</div></div>");     map.AddShape(pin); }; 

However I'm still stuck trying to calculate the Best Zoom Level

回答1:

If you are using the javascript version, then you don't need to calculate it, you can directly give the array of VELatLong objects to VEMap.SetMapView, and it will center + zoom so that all pins are visible.

回答2:

when I had similar problem I solved it with calculating (rough) center of mass for the pins. I say "rough" because I just averaged out the lat/lon for each point and that's not correct as the Earth is a sphere.

回答3:

Thanks so much @wildpeaks for the answer. I've posted my results here for others who need a nudge in the right direction.

$(document).ready(function () {     // Load the Bing Map and populate it     var increment = 0; // used to increment event locations     var sumLat = 0; // used to find the average LAT location     var sumLon = 0; // used to find the average LON location     var latlonArray = new Array();  // used to create an Array of lat and lon in order to "SetMapView"      // Load the initial map     LoadMap();      // loop through all events and place a point on the map     // also add to the sumLat and sumLon variable     $.each(json_object, function () {         latlonArray[increment] = new VELatLong(this.lat, this.lon); // Add to the array before the increment         increment = ++increment;         sumLat = sumLat + this.lat;         sumLon = sumLon + this.lon;         LoadPoint(this.lat, this.lon, this.title, this.desc, increment);     });      // find the averate Lat and Lon for map centering     var latlonCenter = new VELatLong(sumLat / increment, sumLon / increment);      // Set the new map Center based on the average of all points.     map.SetCenter(latlonCenter);     map.SetMapView(latlonArray); // pass the latlonArray object to the SetMapView in order to display all map pins appropriately.  }); 

文章来源: Virtual Earth / Bing Maps - How To Calculate Best Zoom Level