Форум Сайтостроение Веб-строительство

Как запустить три скрипта на одной странице

Brat_Sergij
На сайте с 26.11.2015
Offline
375
Brat_Sergij
533

Добрый день. Хочу на странице разместить три скрипта (3d глобусы). Проблема в том, что если на странице находится три кода, то отображается только один глобус, а мне надо все три друг за другом.

Нагуглил, что вроде проблема в том, что по body onload может загружать только один скрипт, а как сделать загрузку трех, моих знаний уже не хватает.

Скрипт 1.

<script src="http://www.webglearth.com/v2/api.js"></script>
<script>
function initialize1() {
var options = {atmosphere: true, center: [0, 0], zoom: 0};
var earth = new WE.map('earth_div', options);
WE.tileLayer('http://tileserver.maptiler.com/nasa/{z}/{x}/{y}.jpg', {
minZoom: 0,
maxZoom: 5,
attribution: 'NASA'
}).addTo(earth);
}
</script>
<body onload="initialize1()"><div id="earth_div" style="background-color: #000;" ></div>

Скрипт 2.

<script src="http://www.webglearth.com/v2/api.js"></script>
<script>
function initialize2() {
var earth = new WE.map('earth2_div');
WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© OpenStreetMap contributors'
}).addTo(earth);
}
</script>
<body onload="initialize2()"><div id="earth2_div" style="background-color: #000;" ></div>

Скрипт 3.

<script src="http://www.webglearth.com/v2/api.js"></script>
<script>
function initialize() {
var mapBounds = [[-85, -180], [85, 180]];
var mapMinZoom = 0;
var mapMaxZoom = 5;
var center = [0, 0];
var options = {zoom: 0, position: center};
var earth = new WE.map('earth_div', options);

var layer = WE.tileLayer('http://tileserver.maptiler.com/cassini-terrestrial/{z}/{x}/{y}.jpg', {
bounds: mapBounds,
minZoom: mapMinZoom,
maxZoom: mapMaxZoom
});
layer.addTo(earth);
}
</script>
<body onload="initialize()"><div id="earth_div" style="background-color: #000;"></div>
Snake
На сайте с 18.06.2004
Offline
148
Snake
#1

Я думаю как то так:


<script src="http://www.webglearth.com/v2/api.js"></script>
<script>
function initialize2() {
var earth = new WE.map('earth2_div');
WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© OpenStreetMap contributors'
}).addTo(earth);
}
function initialize1() {
var options = {atmosphere: true, center: [0, 0], zoom: 0};
var earth = new WE.map('earth_div3', options);
WE.tileLayer('http://tileserver.maptiler.com/nasa/{z}/{x}/{y}.jpg', {
minZoom: 0,
maxZoom: 5,
attribution: 'NASA'
}).addTo(earth);
}

function initialize() {
var mapBounds = [[-85, -180], [85, 180]];
var mapMinZoom = 0;
var mapMaxZoom = 5;
var center = [0, 0];
var options = {zoom: 0, position: center};
var earth = new WE.map('earth_div', options);

var layer = WE.tileLayer('http://tileserver.maptiler.com/cassini-terrestrial/{z}/{x}/{y}.jpg', {
bounds: mapBounds,
minZoom: mapMinZoom,
maxZoom: mapMaxZoom
});
layer.addTo(earth);
}
function initialize_all() {
initialize();
initialize1();
initialize2();
}
</script>
<body onload="initialize_all()"><div id="earth2_div" style="background-color: #000;" ></div>
<div id="earth_div" style="background-color: #000;" ></div>
<div id="earth_div3" style="background-color: #000;" ></div>
Brat_Sergij
На сайте с 26.11.2015
Offline
375
Brat_Sergij
#2

Snake, благодарю! Всё работает!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий