Bing Maps display Северная Америка верхний левый угол карты

Question

Я пытаюсь отобразить Северную Америку/Канаду в верхнем левом углу карты.

Теперь использование центра mapoptions не поможет, поскольку оно изменяется в зависимости от размера экрана.

я получил мусор дальше, используя что-то вроде этого:

var viewRect = Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-37.71859032558814, -95.2734375), // african ocean 
      new Microsoft.Maps.Location(63.704722429433225, 101.25) 
     ); 
map.setView({ bounds: viewRect }); 

Теперь это лучше, чем сосредоточиться на центре, как он отображает Северную Америку на верхнем левом большом экране, но размер экрана по-прежнему является вопрос.

Кто-нибудь знает какие-либо другие методологии, которые позволяют отображать Северную Америку в верхнем левом углу экрана независимо от размера экрана?

Любая помощь/предложения будут высоко оценены.

Answer 1

Вот что я сделал, сосредоточиться на определенном центре, чтобы изменить вид карты во время загрузки на основе различных стандартных размеров экрана.

function GetBestViewBasedOnScreenSize() { 
var viewportWidth = document.documentElement.clientWidth, viewportHeight = document.documentElement.clientHeight; 
console.log("changed the height is " + viewportHeight + " the widht is " + viewportWidth); 
console.log('view 1'); 
if (viewportWidth > 300 && viewportWidth <= 600) { 

} 
else if (viewportWidth > 300 && viewportWidth <= 1000) { 

    console.log('900 - 1200'); 
    var center = new Microsoft.Maps.Location(26.628887011185398, 27.903637500000013); 
    map.setView({ center: center, zoom: 2 }); 
    console.log('center is ' + '26.628887011185398 27.903637500000013'); 
} 
else if (viewportWidth > 1000 && viewportWidth <= 1200) { // most common 
    var center = new Microsoft.Maps.Location(13.4549, 47.9427); 
    map.setView({ center: center, zoom: 2 }); 
    console.log('center is ' + '13.4549c47.9427'); 
} 
else if (viewportWidth > 1200 && viewportWidth <= 1300) { // for 1280 
    var center = new Microsoft.Maps.Location(29.87829481517158, -24.661942570032593); 
    map.setView({ center: center, zoom: 3 }); 
    console.log('center is ' + '29.87829481517158 - 24.661942570032593'); 
} 
else if (viewportWidth > 1300 && viewportWidth <= 1400) { // for 1360 
    var center = new Microsoft.Maps.Location(33.322323930108524, -12.533881250000025); 
    map.setView({ center: center, zoom: 3 }); 
    console.log('center is ' + '33.322323930108524 - 12.533881250000025'); 
} 
else if (viewportWidth > 1400 && viewportWidth <= 1500) { // for 1440 
    var center = new Microsoft.Maps.Location(18.522390173568184, -3.920600000000025); 
    map.setView({ center: center, zoom: 3 }); 
    console.log('center is ' + '18.522390173568184 - 3.920600000000025'); 
} 
else if (viewportWidth > 1500 && viewportWidth <= 1600) { // for 1600 
    var center = new Microsoft.Maps.Location(15.666478131159806, 9.790337499999975); 
    map.setView({ center: center, zoom: 3 }); 
    console.log('center is ' + '15.666478131159806 9.790337499999975'); 
} 
else if (viewportWidth > 1600 && viewportWidth <= 1920) { // for 1920 
    var center = new Microsoft.Maps.Location(10.704938710599649, 37.73955624999998); 
    map.setView({ center: center, zoom: 3 }); 
    console.log('center is ' + '10.704938710599649 37.73955624999998'); 
} 
else if (viewportWidth > 1920 && viewportWidth <= 2400) { 
    var center = new Microsoft.Maps.Location(4.78563220981988, 47.58330624999998); 
    map.setView({ center: center, zoom: 3 }); 
    console.log('center is ' + '4.78563220981988 47.58330624999998 '); 
} else { 
    // load world 
} 

}