ArcGIS API для JavaScript-карты всегда 400px на 400px

Question

В моем проекте я использую ArcGIS API для JavaScript https://developers.arcgis.com/javascript/, но для (вставить действительно большое плохое слово здесь) я не могу переопределить эту глупую ширину/высоту. Независимо от того, что я делаю, он просто не меняется, карта получается 400px на 400 пикселей.

Я попытался в Google найти несколько примеров CSS, но ни один из них не работал.

Это то, что происходит - первоначально, когда карта загружается размером 400 x 400, то после изменения окна она занимает весь экран. Я попытался установить размер на этом div с важным. Еще ничего.

Возможно, кто-то столкнулся с той же проблемой. Мне нужно установить эту упрямую карту на ширину: 100%; высота: 100%

Answer 1

Проблемы вы испытываете связанная с вкладкой бутстраповских вы размещение вашей карты в При инициализации вашей карты, закладка-панель имеет это набор стилей для display: none. Карта не знает, что с этим делать, поэтому она возвращается к размеру по умолчанию, 400 на 400. Вы можете инициализировать карту после, вкладка видна, поэтому карта получает размер, который вы установили с помощью CSS:

var map; 

// Check when tabs get switched 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    // Check if is tab with map element 
    if (e.target.textContent === 'ArcGIS') { 
     // Check if map is not already initialized 
     if (map === undefined) { 
      // Initialize 
      require([ 
       "esri/map", 
       "dojo/domReady!" 
      ], function(Map) { 
       map = new Map('map', { 
        center: [4.9, 52.378333], 
        zoom: 11, 
        basemap: 'topo' 
       }); 
      }); 
     } 
    } 
}); 

TestCase с проблемой: http://plnkr.co/edit/rOcpNeRPZau7vJQUSnGB?p=preview

TestCase раствором: http://plnkr.co/edit/Tqo6M3EhyDjrNTrCwM0T?p=preview

Обычно это должно быть возможно вызвать resize метод карты, так что инициализирует его размер, но так или иначе, что только что выиграл» т работа в этом случае.

См: https://developers.arcgis.com/javascript/jsapi/map-amd.html#resize

Ваша проблема также описана здесь и там должно быть решение, но ESRI работник не отвечает:/

https://geonet.esri.com/thread/94922

Answer 2

Имейте в виду, что стили элементов уровня всегда будут перекрывать любые другие стили, так как они в последний раз, чтобы решить. Никакой объем CSS не будет отменять стиль на уровне элемента. Чтобы отредактировать это, вам нужно будет изменить его исходящий из сервера, чтобы он отображался как необходимый размер, или использовать Javascript для изменения настроек стиля элемента при изменении размера окна.

Также имейте в виду, что любые родительские divs или контейнеры могут также нуждаться в изменении размера, чтобы полностью реализовать эффект. Похоже, что у родителя есть ограничение 400x400. Вам нужно будет расширить это более чем вероятно.

Вот пример Javascript для изменения размера элементов до 600x600 при изменении размера. Не то, что вы хотите, но может дать вам идею.

window.onresize = function(event) { 
    document.getElementById('mapDiv_root').style.width = "600px"; 
    document.getElementById('mapDiv_root').style.height = "600px"; 

    document.getElementById('mapDiv').style.width = "600px"; 
    document.getElementById('mapDiv').style.height = "600px"; 
}; 

Answer 3

Чтобы расширить на то, что @ iH8 сказал, что когда карта создана, она начинается с узла div div и обрабатывает каждый parentNode для вычисления ширины и высоты карты. Если какой-либо узел, содержащий карту, не имеет ширины или высоты, назначенных через css, API-интерфейс ArcGIS для JavaScript переопределяет ширину и высоту карты и устанавливает ее на 400 пикселей на 400 пикселей. Если все ширины установлены в дереве HTML DOM из HTML в div div карты, но высоты не все установлены, вы получите карту с указанной вами шириной, но высота будет 400 пикселей.

Я буду следовать рекомендациям iH8 о том, как их решить, и убедитесь, что все ширины и высоты назначены либо px, em, либо%.

Answer 4

Я просто столкнулся с проблемой, потому что моя карта находилась внутри невидимого div в окне кендо-и. Так просто хотел бы добавить, что если карта ДИВ изменяет хорошее решение после того, как изменение размера или открыть (любой способ, чтобы получить DIV видимую), чтобы установить высоту DIV и ширина

 $("#"+config.map).height("100%"); 
     $("#" + config.map).width("100%"); 

Основная проблема с принятый ответ заключается в том, что вы постоянно создаете новую переменную карты, в основном в приложении ГИС, у вас будут события, связанные с этой картой, и она передается как параметр. Таким образом, использование глобальных переменных - это ужасный способ решить эту проблему.