Created
March 18, 2011 23:24
-
-
Save jayzeng/877027 to your computer and use it in GitHub Desktop.
map v7
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en" type="text/javascript" charset="UTF-8"></script> | |
</head> | |
<body onload="init();"> | |
<div id="myMap" style="position: relative; width: 600px; height: 450px;"></div> | |
<script type="text/javascript"> | |
function setView(map, options){ | |
console.log(options); | |
if (options.locations){ | |
var locations = options.locations; | |
var l = locations.length; | |
if (l > 1){ | |
var maxLat = -85; | |
var minLat = 85; | |
var maxLon = -180; | |
var minLon = 180; | |
for (var i = 0; i < l; i++){ | |
var loc = locations[i]; | |
maxLat = Math.max(loc.latitude, maxLat); | |
minLat = Math.min(loc.latitude, minLat); | |
maxLon = Math.max(loc.longitude, maxLon); | |
minLon = Math.min(loc.longitude, minLon); | |
} | |
options.center = new Microsoft.Maps.Location( | |
(maxLat + minLat) / 2, | |
(maxLon + minLon) / 2 | |
); | |
var zoom1 = 0; | |
var zoom2 = 0; | |
if ((maxLon != minLon) && (maxLat != minLat)){ | |
zoom1 = Math.log(360 / 256 * map.getWidth() / (maxLon - minLon)) / Math.log(2); | |
zoom2 = Math.log(180 / 256 * map.getHeight() / (maxLat - minLat)) / Math.log(2); | |
} | |
options.zoom = Math.floor(Math.min(zoom1, zoom2)); | |
} else if (l == 1){ | |
options.center = options.locations[0]; | |
} | |
} | |
map.setView(options); | |
}; | |
var map = null; | |
function init(){ | |
// Load the map | |
map = new Microsoft.Maps.Map( | |
document.getElementById("myMap"), | |
{ | |
credentials: "AvNHx-9klxnBOIe2Wr_nywZ04F2G8X_l3m-x-Boe9_Pe57wReRh8aHbL9P6bNZfw", | |
mapTypeId: Microsoft.Maps.MapTypeId.road | |
} | |
); | |
// Some sample pins | |
var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-10, 0), {text: '1'}); | |
var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 10), {text: '2'}); | |
var pin3 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(10, 0), {text: '3'}); | |
var pin4 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(20, -20), {text: '4'}); | |
var pin5 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(41.88491248124176, 12.52016107413556), {text: '5'}); | |
var pin6 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(28.287097376655083, 106.12336178706825), {text: '6'}); | |
var pin7 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(64.76575850827713,-102.83675660646524), {text: '7'}); | |
var pin8 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-21.604945446832062, 146.4870525903023), {text: '8'}); | |
map.entities.push(pin1); | |
map.entities.push(pin2); | |
map.entities.push(pin3); | |
map.entities.push(pin4); | |
map.entities.push(pin5); | |
map.entities.push(pin6); | |
map.entities.push(pin7); | |
map.entities.push(pin8); | |
// Set the view given an array of Location objects | |
setView( | |
map, //reference ot the Microsoft.Maps.map | |
{ | |
locations: [ | |
pin1.getLocation(), | |
pin2.getLocation(), | |
pin3.getLocation(), | |
pin4.getLocation(), | |
pin5.getLocation(), | |
pin6.getLocation(), | |
pin7.getLocation(), | |
pin8.getLocation() | |
], | |
// and any ViewOptions parameter, e.g. "animate" | |
animate: true, | |
padding: 50 | |
} | |
); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment