장치 너비에 따라 맵의 크기를 조정하려면 어떻게해야합니까?

Question

나는 축구 월드컵을위한 작은 웹 사이트를 만들었습니다. 웹 사이트에는 내 웹 사이트에서 가장 중요한 요소 인지도 (지도 상자에서 제공)가 포함되어 있으므로 웹 사이트의 배경입니다. 폭은 100 %로 설정됩니다. 이제 장치 (태블릿, 전화)에 따라지도의 크기를 조정하여지도와 전체 웹 사이트가 각 장치에서 비슷하게 보이도록하고 싶습니다.

body { 
margin:0; 
padding:0; 
width:auto% !important; 
height: auto% !important; 
} 

#map { 
position:absolute; 
top:0; 
bottom:0; 
width:100%; 

가 지금은 모든 장치 맵보기에서 해당 싶습니다 : 여기

var map = L.mapbox.map('map', 'hashtagwinti.i72di96c', { 
zoomControl: false, 
maxZoom: 10, 
minZoom: 2, 
}) 
.setView([-8, -50], 4); 
L.control.scale({position: 'bottomleft', metric: true, imperial:false}).addTo(map); 
map.featureLayer.setGeoJSON(brazil).addTo(map); 

내 내 몸의 CSS와지도입니다 : 여기

내 자바 스크립트에서 코드입니다 는 똑같은. 현재 iPhone과 같은 웹 사이트를 방문하는 경우 확대/축소 수준이 변경되지 않습니다 (지도보기가 동일하지 않음).

어떤 아이디어가 있습니까?

(경우 이미 mapbox API에 대한 솔루션을 보였지만, 나는 해결책을 발견하지 않았다)

Answer 1

당신은 당신의 미디어 쿼리 유형의 호출에 대한 조정하려는 화면 크기 Mapbox 말할 수 있습니다 if/else 문으로 그 크기만큼 다른 것을해라. 당신은 너무 등을지도 센터, 마커,

같은 다른 일을 설정할 수 있습니다

var mq = window.matchMedia("(min-width: 420px)"); 

if (mq.matches){ 
    var map = new L.mapbox.map('map', 'hashtagwinti.i72di96c').setView([-8, -50], 4); //set map zoom level for desktop size 
} else { 
    var map = new L.mapbox.map('map', 'hashtagwinti.i72di96c').setView([-8, -50], 3); //set map zoom level for mobile size 
}; 

:

예를 들어, ~ 420 이하는이 같은 것 전화 화면 크기에 대한 줌 레벨을 설정합니다

Answer 2

map.invalidateSize(); 브라우저 창이나 상위 컨테이너의 크기에 따라지도 크기를 조정하는 가장 간단한 해결책을 찾았습니다.

다음은 MapBox 웹 사이트의 invalidateSize에 대한 추가 정보입니다. https://www.mapbox.com/help/why-map-cropped-hidden-shown/