초보 카카오 지도관련 질문 드립니다.

초보 카카오 지도관련 질문 드립니다.

QA

초보 카카오 지도관련 질문 드립니다.

본문

안녕하세요~

메인 화면에 게시판(product01)에 (wr_1) 주소를 불러와서 카카오 지도에 표시할려고 하는데요

고수님들 아래 소스 좀 보아 주세요! 지도가 뜨질 안아요 ㅠ

수정할 곳이나 잘못된 곳 있으면 조언좀 부탁 드립니다."꾸벅"

(아래)

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(36.48005808069782, 127.28903907443583), // 지도의 중심좌표
        level: 13 // 지도의 확대 레벨
    };
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
var positions = [
    <?
 $sql = "select * from g5_write_product01 order by wr_num";
 $result = sql_query($sql);
 while($row = sql_fetch_array($result)) {
   $address = $row['wr_1'];
   $url = "https://dapi.kakao.com/v2/local/search/address.json?query=".urlencode($address);

$ch=curl_init();
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url); // url 연결
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HTTPHEADER,
            array("Accept: application/json", "Content-Type: application/json",
                  "Authorization: KakaoAK {혹시 요기는 머가 들어가나요}"));
curl_setopt($ch, CURLOPT_VERBOSE, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

$response = curl_exec($ch);
$result = (array) json_decode($response);

curl_close($ch); // 종료

}
   ?>

   ];

for (var i = 0; i < positions.length; i ++) {

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

    // 정상적으로 검색이 완료됐으면
     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

   // 마커에 표시할 인포윈도우를 생성합니다
    var infowindow = new kakao.maps.InfoWindow({
        content: positions[i].content // 인포윈도우에 표시할 내용
    });
    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
    // 이벤트 리스너로는 클로저를 만들어 등록합니다
    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker,infowindow));
    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}
</script>
</div>  
 </div>
</div>

<script>
$(document).ready(function(){
 
});
</script>

  

이 질문에 댓글 쓰기 :

답변 2

https://apis.map.kakao.com/web/sample/addr2coord/

여기를 참조해서.. 

여러개의 마커를 표시하려면,

"제주특별자치도 제주시 첨단로 242" 이 부분의 주소를 변경해줘야 합니다.

 

geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {
이 부분이 주소로 검색을 해주는 부분입니다.
여기에 해당 주소를 변경하면서 for 문을 돌려서 표시해야 합니다.

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

회원로그인

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