第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

來自 mapbox 的地圖不會(huì)在選項(xiàng)卡單擊時(shí)完全加載

來自 mapbox 的地圖不會(huì)在選項(xiàng)卡單擊時(shí)完全加載

慕森卡 2023-04-27 17:20:39
我使用的地圖mapbox在單擊選項(xiàng)卡時(shí)不會(huì)加載完整。單擊選項(xiàng)卡時(shí),地圖的大小會(huì)調(diào)整為原始大小的 50%(不知道為什么會(huì)這樣)。的html/javascript地圖如下圖所示:<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script><strong><div class="tab"><button class="tablinks" onclick="openTab(event, 'part1')" id="defaultOpen">ABC DEF</button><button class="tablinks" onclick="openTab(event, 'part2')">GHI JKL</button></div></strong><div id="part1" class="tabcontent"><div id="map1"></div> </div><div id="part2" class="tabcontent"><div id="map2"></div></div><script>mapboxgl.accessToken = 'hello';// Set boundsvar bounds = [    [e, f], // Southwest coordinates    [g, h, ]  // Northeast coordinates];var map = new mapboxgl.Map({    container: 'map1',    style: 'mapbox://styles/abcdef',    center: [p, q],    zoom: 12.3,    maxBounds: bounds // Sets bounds as max});// Add zoom and rotation controls to the map.map.addControl(new mapboxgl.NavigationControl());map.addControl(new mapboxgl.FullscreenControl(), 'top-left');</script><script>mapboxgl.accessToken = 'hello';// Set boundsvar bounds = [    [a, b], // Southwest coordinates    [c, d, ]  // Northeast coordinates];var map = new mapboxgl.Map({    container: 'map2',    style: 'mapbox://styles/abcdef',    center: [y, z],    zoom: 9.8,    maxBounds: bounds // Sets bounds as max});// Add zoom and rotation controls to the map.map.addControl(new mapboxgl.NavigationControl());map.addControl(new mapboxgl.FullscreenControl(), 'top-left');</script>問題陳述:我想知道我需要在上面的腳本中進(jìn)行哪些更改,以便它在選項(xiàng)卡單擊時(shí)完全加載(doesn't get resized into 50% of the original size)
查看完整描述

1 回答

?
Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

map1添加樣式以設(shè)置高度和map2容器后,似乎按預(yù)期工作:


#map1, #map2 {

  height: 500px;

}

mapboxgl.accessToken = 'access_token';


var a = -79.5,

  b = 35,

  c = -69.5,

  d = 45,

  p = -74.5,

  q = 40,

  e = -79.5,

  f = 35,

  g = -69.5,

  h = 45,

  y = -74.5,

  z = 40;


// Set bounds

var bounds = [

  [e, f], // Southwest coordinates

  [g, h, ] // Northeast coordinates

];

var map = new mapboxgl.Map({

  container: 'map1',

  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location

  center: [p, q],

  zoom: 12.3,

  maxBounds: bounds // Sets bounds as max

});

// Add zoom and rotation controls to the map.

map.addControl(new mapboxgl.NavigationControl());

map.addControl(new mapboxgl.FullscreenControl(), 'top-left');


// Set bounds

var bounds = [

  [a, b], // Southwest coordinates

  [c, d, ] // Northeast coordinates

];

var map = new mapboxgl.Map({

  container: 'map2',

  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location

  center: [y, z],

  zoom: 9.8,

  maxBounds: bounds // Sets bounds as max

});

// Add zoom and rotation controls to the map.

map.addControl(new mapboxgl.NavigationControl());

map.addControl(new mapboxgl.FullscreenControl(), 'top-left');


function openTab(evt, era) {

  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {

    tabcontent[i].style.display = "none";

  }

  tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].className = tablinks[i].className.replace(" active", "");

  }

  document.getElementById(era).style.display = "block";

  evt.currentTarget.className += " active";

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

#map1,

#map2 {

  height: 500px;

}

<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>

<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />


<div class="tab">

  <button class="tablinks" onclick="openTab(event, 'part1')" id="defaultOpen">ABC DEF</button>

  <button class="tablinks" onclick="openTab(event, 'part2')">GHI JKL</button>

</div>

<div id="part1" class="tabcontent">

  <div id="map1"></div>

</div>


<div id="part2" class="tabcontent">

  <div id="map2"></div>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-04-27
  • 1 回答
  • 0 關(guān)注
  • 249 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)