sfxvvv
11월 15, 2018, 6:40오전
#1
안녕하세요.
현재 시스템에서 Daum map api를 사용하고 있는데
서버에서 받아온 데이터를 각각
화면 좌측의 map, 화면 우측에 그리드 로 뿌려주고 있습니다.
이에 관련한 개발 도중
줌 1~4 레벨 대형이미지
줌 5~7 레벨 중형이미지
줌 8~10 레벨 소형이미지 이렇게 이미지 를 생성 후 마커에 넣어주려고 하는데
상단에서
var marker;
// 마커를 생성합니다
marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: new daum.maps.LatLng(lat, lng), // 마커를 표시할 위치
title : strNm, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage, // 마커 이미지
});
와 같이 마커 객체 생성후
daum.maps.event.addListener(map, ‘zoom_changed’, function(){
// 지도의 현재 레벨을 얻어옵니다
var level = map.getLevel();
if(0 < level < 5){
var imageSrc = brndIcoS;
var imageSize = new daum.maps.Size(30, 30);
// 이미지(소) 사이즈
// var imageSize = new daum.maps.Size(35, 35);
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
}else if(4 < level < 8){
var imageSrc = brndIcoM;
// 이미지(중) 사이즈
var imageSize = new daum.maps.Size(35, 35);
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
}else if(7 < level < 11){
var imageSrc = brndIcoL;
// 이미지(대) 사이즈
var imageSize = new daum.maps.Size(40, 40);
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
}
});
이런식으로 처리 해보려고 했는데 잘 안되서 몇 가지 질문들 드리려고 합니다.
줌 레벨 범위 지정을 위해 if(0 < level < 5){} 와 같이 범위 지정을 했는데 이 문법이 올바른 것인지
순서가 잘못 되었다고 하면 순서를 어떤 식으로 진행해야 하는지
많은 가르침 부탁드립니다. 감사합니다.
허… 넘나 파이썬 스타일인데요.
자바스크립트에서는
if(0 < level < 5) // (x)
if(0 < level && level < 5) // (o)
그리고 marker.setImage(markerImage); 만 해주시면
markerImage는 zoom_changed 이벤트 handler 밖에서
그리고…
if(1 <= level && level <= 4) {
} else if(5 <= level && level <= 7) {
} else if(8 <= level && level <= 10) {
}
이렇게 하는게 기획 의도를 파악하기 더 쉬울거에요… ㅠ
자바스크립트 프로그래밍을 본격적으로 배우실 예정이시라면
1개의 좋아요
sfxvvv
11월 16, 2018, 4:14오전
#3
넵 좋은 가르침 감사합니다.
말씀하신대로 위의 문법대로
상단에 아래와 같이 마커 이미지를 지정 후
if(brndIcoS){
var imageSrc = brndIcoS;
var imageSize = new daum.maps.Size(10, 10);
// 이미지(소) 사이즈
// var imageSize = new daum.maps.Size(35, 35);
var BRND_ICON_S = new daum.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
marker = new daum.maps.Marker({
map: statusStorMap, // 마커를 표시할 지도
position: new daum.maps.LatLng(lat, lng), // 마커를 표시할 위치
title : strNm, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : BRND_ICON_S, // 마커 이미지
});
}
if(brndIcoM){
var imageSrc = brndIcoM;
// 이미지(중) 사이즈
var imageSize = new daum.maps.Size(50, 50);
var BRND_ICON_M = new daum.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: new daum.maps.LatLng(lat, lng), // 마커를 표시할 위치
title : strNm, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : BRND_ICON_M, // 마커 이미지
});
}
if(brndIcoL){
var imageSrc = brndIcoL;
// 이미지(대) 사이즈
var imageSize = new daum.maps.Size(100, 100);
var BRND_ICON_L = new daum.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: new daum.maps.LatLng(lat, lng), // 마커를 표시할 위치
title : strNm, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : BRND_ICON_L, // 마커 이미지
});
}
*아래와같이 줌 체인지 이벤트 핸들러에 각각 줌 레벨별로 setImage 를 해주었는데, 첫 줌레벨 크기의 이미지만 계속 표시되고 해당 레벨 범위에 따라 이미지가 변화되지 않는데, 어떤 객체를 제대로 초기화 해주지 않아서 그런 것일까요?
daum.maps.event.addListener(map, 'zoom_changed', function(){
// 지도의 현재 레벨을 얻어옵니다
var level = map.getLevel();
if(1 <= level && level <= 4) {
marker.setImage(BRND_ICON_L);
}else if(5 <= level && level <= 7) {
marker.setImage(BRND_ICON_M);
}else if(8 <= level && level <= 10) {
marker.setImage(BRND_ICON_S);
}
var message = '현재 지도 레벨은 ' + level + ' 입니다';
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = message;
});
자꾸 질문드려서 죄송합니다…
var BRND_ICON_S = new daum.maps.MarkerImage(brndIcoS, new daum.maps.Size(10, 10));
var BRND_ICON_M = new daum.maps.MarkerImage(brndIcoM, new daum.maps.Size(50, 50));
var BRND_ICON_L = new daum.maps.MarkerImage(brndIcoL, new daum.maps.Size(100, 100));
var marker = new daum.maps.Marker({
map: map,
position: new daum.maps.LatLng(lat, lng),
title : strNm
});
daum.maps.event.addListener(map, 'zoom_changed', function(){
var level = map.getLevel();
var markerImage;
if (1 <= level && level <= 4) {
markerImage = BRND_ICON_L;
} else if (5 <= level && level <= 7) {
markerImage = BRND_ICON_M;
} else if (8 <= level && level <= 10) {
markerImage = BRND_ICON_S;
}
marker.setImage(markerImage);
});
1개의 좋아요
sfxvvv
11월 16, 2018, 7:20오전
#5
말씀해주신데로 적용해보니 마커 기본 이미지로 적용이 됬네요… 무언가 제 소스에 전반적인 이상이 있는것 같습니다… 감사합니다.
기본 이미지가 나오는건 초기화를 안해서 그렇습니다.
초기화 처리된 코드는 아래와 같습니다.
var BRND_ICON_S = new daum.maps.MarkerImage(brndIcoS, new daum.maps.Size(10, 10));
var BRND_ICON_M = new daum.maps.MarkerImage(brndIcoM, new daum.maps.Size(50, 50));
var BRND_ICON_L = new daum.maps.MarkerImage(brndIcoL, new daum.maps.Size(100, 100));
var marker = new daum.maps.Marker({
map: map,
position: new daum.maps.LatLng(lat, lng),
title : strNm
});
var changeMarkerImage = function(){
var level = map.getLevel();
var markerImage;
if (1 <= level && level <= 4) {
markerImage = BRND_ICON_L;
} else if (5 <= level && level <= 7) {
markerImage = BRND_ICON_M;
} else if (8 <= level) { // 10레벨 이상에서도 마커이미지는 필요합니다. 예외처리 필요.
markerImage = BRND_ICON_S;
}
marker.setImage(markerImage);
};
daum.maps.event.addListener(map, 'zoom_changed', changeMarkerImage);
changeMarkerImage(); // initialize
1개의 좋아요
