묻고답하기
질문] 확장컴포넌트 "지도" 크기 조절
2015.01.10 20:10
안녕하세요.
질문 드립니다. ^^;;
https://www.xpressengine.com/index.php?mid=download&package_id=22753406
XE 버젼은 1.7.9 입니다.
지도버젼은 1.1 입니다.
미솔님의 에디터 확장컴포넌트 "지도"를 사용중입니다.
유용하게 잘 사용하고 있습니다.
다시한번 미솔님께 감사드립니다.^^
모바일에서 보면 지도크기가 그대로 여서 옆으로 뚫고 나가네요.
이미지 같이 화면 크기에 따라 크기 조절되는 옵션이 있나요?
아무리 찾아 봐도 없는것 같아 질문드립니다.
변경옵션이 없으면, 어디를 수정해야 가능할까요?
읽어주셔서 감사합니다. m(_ _)m
댓글 16
-
비상9
2015.01.11 15:59
-
DoorWeb
2015.01.11 16:03
일반적으로 모바일에서는 jquery를 안불러 옵니다.
그냥
<span id="ggl_map_canvas1" style="width: 100%; height: 400px" class="soo_maps"></span>
처리하면 안되나요?
-
비상9
2015.01.11 16:13
답변 감사합니다.
허걱...
완전 혼자서 뻘짓했군요. ㅠㅠ
될수 있으면 원소스를 거드리지 않으려고 해서요.
그리고 무슨 이유인지를 모르겠지만 "%" 주면 먹질 않습니다.
구글링으로, 지도 관련된곳을 전부 뒤져 보니, "%"로 크기를 지정한곳을 찾지 못했습니다.
-
DoorWeb
2015.01.11 16:19
구글인데 % 감안 안하고 만들었을리가 없을겁니다.
% 넣어서 한번 해 보세요.
-
비상9
2015.01.11 16:24
예^^
두번째 댓글보시면, 테스트 했습니다. ^^;;;;
"%"를 넣으면, 지도 자체가 나타나질 않습니다. 이것때문에 또 한참 해맸습니다. ㅎㅎ~~
지도는 다음지도를 사용하고 있습니다.
-
비상9
2015.01.11 16:55
리플을 다시 읽다보니 다른 분들이 혹시 오해의 소지가 있을것 같아 말씀 드립니다.
이건 전부 모바일에서 나타나는 현상입니다.
PC는 정상적으로 움직입니다.^^
만약 PC에서 지도 크기를 변경하시고자 하신다면 위에 코드를 가져다가 고치시면 됩니다.^^
DoorWeb님이 말씀하신것도 되고요.
KrteamENT님이 말씀하신 방법도 됩니다.
모바일에서 지도크기를 변경 하는 방법은 좀더 뒤져봐야 겠습니다.
-
DoorWeb
2015.01.11 16:56
모바일 레이아웃쪽 css 한 구석에
.soo_maps{width:100% !important;}
넣어 보십시오.
-
비상9
2015.01.11 17:05
우아...
대단하십니다.
됐어요.
감격입니다. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
감사합니다.
-
비상9
2015.01.11 17:21
DoorWeb님, KrteamENT님, 읽어주신 회원여러분 감사합니다.
정보를 검색하다 보니, 몇몇분께서도 필요할것 같아 코드정리하고,
몇가지 더 테스트 한다음에,
완성된 코드 올리도록 하겠습니다.
다시한번 감사드립니다.
-
비상9
2015.01.11 19:14
[모바일에서 지도 width를 100% 설정하는 방법 정리]
도움주신분들이 있어 지도 크기를 바꿀수 있었습니다. 감사합니다.
[에디터 컴포넌트 지도 1.1 버젼 소스 지도출력부분]
<span id="ggl_map_canvas1" style="width: 600px; height: 400px" class="soo_maps"></span>
[추가 코드]
[jquery 코드]
jQuery('.soo_maps' , this).each(function() {
var $spn = $(this);$spn.attr('style', 'width:100%; height:100%;');
});[css 코드]
.soo_maps {max-width:100%;height:auto; !important}
jquery코드는 모바일일때 불러오는 곳에 넣어주시면 됩니다.
css코드는 모바일일때 불러오는 css 파일에 넣어주시면 됩니다.
[테스트 후 문제점]
제가 PC 와 모바일에서 doorweb_v4 레이아웃을 사용중입니다.
그리고 보니, 도움주신분이 DoorWeb님이시네요. :)
모바일에서, 코드를 적용한 지도 출력 게시물에서는,
"전체"를 누르면 서브메뉴가 나오질 않습니다. 뭔가 부디치는것 같습니다.^^;
그것만 유의해서 사용하시면 됩니다.(이것저것 찾아보는데 해결을 못했습니다. ㅠㅠ)
-
키스미베이베
2015.07.04 02:46
안녕하세요 비상9님 저도 님과같은 문제를 겪오있는데 무슨파일을 고쳐야하느지 경로좀 가르쳐 주실수있습니까 ㅜㅜ? 이거때문에 미치겠네요..
-
비상9
2015.07.04 09:28
오래전의 일이라 찾느라고 조금 늦었습니다.
이거 정말 벌써부터 건망증 증상이 보이네요. ㅠㅠ
내용을 보시면 아시겠지만.
css 와 js 두곳에 넣어 두었습니다.
이것을 어디가 넣을지 고민하다,
https://www.xpressengine.com/index.php?mid=download&package_id=22735026 에드온에 추가 하였습니다.
이 에드온이 하는 일은 모바일에서 이미지를 축소하는 동작을 합니다.
이것을 설치하면 에드온 디렉토리에
[css 추가 하기]
addons/sejin7940_mobile_resize/css/resize_image.mobile.css <-- 파일명
제일 아래에
.xe_content .soo_maps {max-width:100%;height:auto; !important} <-- 추가 합니다.
[js 추가 하기]
addons/sejin7940_mobile_resize/js/resize_image.mobile.js <-- 파일에
제일 아래에 아래와 같은 내용을 추가 하시면 됩니다.
jQuery('.soo_maps' , this).each(function() {
var $spn = $(this);$spn.attr('style', 'width:100%; height:100%;');
});위에 리플에서도 알 수 있듯이,
문제점이 몇가지 있습니다.
1. 가로 부분만 크기에 맞게 줄어 듭니다.
2. 모바일 레이아웃에서 지도 출력 부분이 있으면 메뉴가 동작 안합니다.
그럼 도움이 되셨길 바랍니다.
-
키스미베이베
2015.07.04 19:36
자포자기로 댓글을 달앗는데 이렇게 빨리 대댓글이 달릴줄 몰랏습니다
너무나 감사합니다 ㅜㅜ (--)(__)꾸벅
-
키스미베이베
2015.07.04 22:01
흠... 메뉴부분은 저는 잘 작동하네요
그리고 js는 무슨 역할을 하는건가요??
-
비상9
2015.07.04 22:32
js 코드가 지도의 가로세로 길이를 100% 로 변경시킵니다.
즉 원소스에 고정된크기로 표출하도록 코딩( style="width: 600px; height: 400px" )된것을
화면비율에 맞춰서 변동하도록 변경시켜주는겁니다.
모바일때문 필요해므로 모바일 실행되는곳에 넣어두면, 동작을 하겠죠.
그냥 일반 PC에서도 동작하기를 원하시면, 지도 쪽 소스에 넣으시면 됩니다.
저는 doorweb_v4 레이아웃을 사용하는데, 이 레이아웃을 좋긴하데, 다른것들과 충돌이 자주 생깁니다.
질문 내용을 보니, 잘 해결되신것 같은데, 고생하셨습니다.^^
-
키스미베이베
2015.07.05 05:27
css에 important값만 줘도 변경이 잘된것 같아서요 ㅎㅎ
무튼 정말 감사드립니다 덕분에 이렇게 해결하네요 ^^
[원본내 지도 출력부분]
<span id="ggl_map_canvas1" style="width: 600px; height: 400px" class="soo_maps"></span>
----------------------------------------------------------------
[에드온으로 밀어 넣은 jQuery 부분]
jQuery('.soo_maps' , this).each(function() {
var $spn = $(this);
$spn.attr('style', 'width:300px; height:300px;');
});
----------------------------------------------------
문제점]
PC 의 IE 와 크롬에서는 잘 작동하는데, 모바일에서는 작동을 안합니다.
우찌 이런일이 ㅠㅠ
모바일때문에 바꾸려고 하는건데,
아이폰에서는 아예 지도 자체가 나타나질 않습니다.
안드로이드폰은 지도는 나타나는데, 원본대로 나타나서 동작을 안하는것 같습니다.
어떻게 바꿔야 할까요???