카카오지도 마커 문의드립니다.

카카오지도 마커 문의드립니다.

QA

카카오지도 마커 문의드립니다.

본문

안녕하세요. 늘 귀한 답변 감사드립니다.

sido.zip.js 파일과 여분필도 wr_2, wr_9에 구,동선택, wr_5에 주소를 입력하면, wr_3과 wr_4에 위도,경도가 입력되고, 마커가 표시되는 카카오지도 게시판을 만들어 잘사용하고 있는데요.


<label for="wr_2" class="sound_only">구 검색</label>
<select id="sido" name="wr_2" id="wr_2" class="formcontrol" onchange="this.form.submit();"></select>

안양동안구 또는 안양만안구를 선택하면 지도의 중심좌표로 이동하지만, 카카오지도에서는 모든 지역의 마커가 보이는데요. 동안구 또는 만안구를 선택했을 때 선택된 지역의 마커만 보이게 할 수는 없는지요?

write.skin.php

<option value="전체">구 선택</option>
<option value="안양동안구"<?php echo get_selected('안양동안구', $wr_2);?>>안양동안구</option>
<option value="안양만안구"<?php echo get_selected('안양만안구', $wr_2);?>>안양만안구</option>


<option value="전체">동 전체</option>
<?php if($write['wr_2']) { ?>
<option value='<?php echo $write['wr_9']?>' selected><?php echo $write['wr_9']?></option>
<?php } ?>

<input type="text" name="wr_5" id="wr_5" value="<?=$write['wr_5']?>" onBlur="getLByAddress(this.value);" class="formcontrol">
<p>위도 <input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_3" readonly class="full_input"> 

위도 <input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_3" readonly class="full_input"> 
경도 <input type="text" name="wr_4" value="<?php echo $write['wr_4'] ?>" id="wr_4" readonly class="full_input">
 

list.skin.php
<!-- 카카오지도 -->
<div id="map" style="width:100%;height:500px;"></div>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=&libraries=services"></script>


<?php  if($bo_table=="test" and  $wr_2=='안양동안구') { ?>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
    mapOption = { 
        center: new daum.maps.LatLng(37.39273469340052, 126.95147634186101), // 지도의 중심좌표
        level: 7 // 지도의 확대 레벨
    }; 
</script>


<?php } else if($bo_table=="test" and  $wr_2=='안양만안구') { ?>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
    mapOption = { 
        center: new daum.maps.LatLng(37.38674632371456, 126.93258054213912), // 지도의 중심좌표
        level: 7 // 지도의 확대 레벨
    }; 
</script>


<div class="tc_sec_w">
<label for="wr_2" class="sound_only">구 검색</label>
<select id="sido" name="wr_2" id="wr_2" class="form-control input-sm" onchange="this.form.submit();"></select>
</div>


<div class="tc_sec_w">
<label for="wr_9" class="sound_only">동 검색</label>
<select id="gugun" name="wr_9" id="wr_9" class="form-control input-sm" onchange="this.form.submit();"></select>
<script language="JavaScript">
// 지역
sidoview("<?php echo $wr_2;?>"); 
gugunview("<?php echo $wr_2;?>","<?php echo $wr_9;?>"); 
function sidochange(){
var f = document.fwrite;
gugunview(f.sido.value);
}
</script>
</div>

늘 감사드립니다.
 

이 질문에 댓글 쓰기 :

답변 1

제일 좋은건 지도 같은 경우 동을 선택할때마다 페이지가 리프레쉬 되면 조금 접근성이 떨어지니까 

검색폼에 구, 동을 선택할수 있게끔 하고 select change 됐을때 event 에서 

ajax로 데이터를 불러와 해당구 또는 동에 속하는 마커를 표시해주는게 좋습니다. 

 

javascript 로 처리하기 힘드시다면 wr_2, wr_9에 속하는 값들을 검색할수 있게끔 처리하셔야 되는데 

방법은 두가지가 있습니다.

1. /bbs/list.php 파일을 직접 수정하셔서 wr_2, wr_9를 검색할수 있게끔 바꾸는 방법

2. 해당 게시판의 스킨 파일 상단에서 검색값으로 넘어온 구, 동 값들로 wr_2, wr_9 값을

   만족하는 데이터를 따로 찾아내 해당 데이터의 자표들만 지도에 표시해 주는 방법

 

뭐 하고자 하면 방법은 이것외에도 많을 거에요.

공개 스킨이나 이런것들도 찾아보시면 정보는 많이 있을겁니다. 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,729 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT