안녕하세요.

카카오맵api 사용중 어려운점이 있어 질문드립니다.

맵을 하나 만들고,지오로케이션으로 사용자 주소를 입력받아 내 위치도 마커를찍고

또 ,입력한 주소를 좌표로 변환하여 그곳에 마커를 찍고 인포윈도우를 띄우고싶은데 잘안되네요ㅜㅜ

멋진 형님들 누나들 도와주세요

<script type="text/javascript">
					      var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
					      mapOption = {
					         center : new kakao.maps.LatLng(36.49334, 127.27856), // 지도의 중심좌표
					         level : 10, // 지도의 확대 레벨
					         mapTypeId : kakao.maps.MapTypeId.ROADMAP
					      // 지도종류
					      };

					      // 지도를 생성한다 
					      var map = new kakao.maps.Map(mapContainer, mapOption);

					      // 마커 클러스터러를 생성합니다 
					      var clusterer = new kakao.maps.MarkerClusterer({
					         map : map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
					         averageCenter : true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
					         minLevel : 6
					      // 클러스터 할 최소 지도 레벨 
					      });

					      // 지도 타입 변경 컨트롤을 생성한다
					      var mapTypeControl = new kakao.maps.MapTypeControl();

					      // 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
					      map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

					      // 지도에 확대 축소 컨트롤을 생성한다
					      var zoomControl = new kakao.maps.ZoomControl();

					      // 지도의 우측에 확대 축소 컨트롤을 추가한다
					      map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

					      //내위치 받아오기
					      if (navigator.geolocation) {

					         // GeoLocation을 이용해서 접속 위치를 얻어옵니다
					         navigator.geolocation.getCurrentPosition(function(position) {

					            var lat = position.coords.latitude, // 위도
					            lon = position.coords.longitude; // 경도

					            var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
					            message = '<div style="padding:5px; text-aling:center;">내위치</div>'; // 인포윈도우에 표시될 내용입니다

					            // 마커와 인포윈도우를 표시합니다
					            displayMarker(locPosition, message);

					         });

					      } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다

					         var locPosition = new kakao.maps.LatLng(33.450701, 126.570667), message = 'geolocation을 사용할수 없어요..'

					         displayMarker(locPosition, message);
					      }function displayMarker(locPosition, message) {

					          // 마커를 생성합니다
					          var marker = new kakao.maps.Marker({  
					              map: map, 
					              position: locPosition
					          }); 

					          var iwContent = message, // 인포윈도우에 표시할 내용
					              iwRemoveable = true;

					          // 인포윈도우를 생성합니다
					          var infowindow = new kakao.maps.InfoWindow({
					              content : iwContent,
					              removable : iwRemoveable
					          });

					          // 인포윈도우를 마커위에 표시합니다 
					          infowindow.open(map, marker);

					          // 지도 중심좌표를 접속위치로 변경합니다
					          map.setCenter(locPosition);      
					      }

					      // 다중 마커 생성
					      var Data = [
					           
					            [ 36.514043, 127.263682,
					                  '<div style="padding:5px;">도담 고등학교</div>' ],
					            [ 36.514494, 127.254835,
					                  '<div style="padding:5px;">늘봄 초등학교</div>' ],
					            [ 36.511590, 127.262530,
					                  '<div style="padding:5px;">도담 초등학교</div>' ] ];

					      // 마커들을 저장할 변수 생성
					      var markers = [];
					      for (var i = 0; i < Data.length; i++) {
					         // 지도에 마커를 생성하고 표시한다.
					         var marker = new kakao.maps.Marker({
					            position : new kakao.maps.LatLng(Data[i][0], Data[i][1]), // 마커의 좌표
					            map : map
					         // 마커를 표시할 지도 객체
					         });

					         iwPosition = new kakao.maps.LatLng(Data[i][0], Data[i][1]),
					               iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

					//          인포윈도우를 생성하고 지도에 표시합니다
					         var infowindow = new kakao.maps.InfoWindow({
					            map : map, // 인포윈도우가 표시될 지도
					            position : iwPosition,
					            content : Data[i][2],
					            removable : iwRemoveable
					         });

					         // 생성된 마커를 마커 저장하는 변수에 넣음
					         markers.push(marker);

					//          마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
					//          이벤트 리스너로는 클로저를 만들어 등록합니다 
					//          for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
					         kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(
					               map, marker, infowindow));
					         kakao.maps.event.addListener(marker, 'mouseout',
					               makeOutListener(infowindow));
					      }

					      // 클러스터러에 마커들을 추가합니다
					      clusterer.addMarkers(markers);

					//       인포윈도우를 표시하는 클로저를 만드는 함수입니다 
					      function makeOverListener(map, marker, infowindow) {
					         return function() {
					            infowindow.open(map, marker);
					         };
					      }

					      // 인포윈도우를 닫는 클로저를 만드는 함수입니다 
					      function makeOutListener(infowindow) {
					         return function() {
					            infowindow.close();
					         };
					      }
				</script>
				<script>
			

					// 주소-좌표 변환 객체를 생성합니다
					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 : '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
// 													});
											infowindow.open(map, marker);

											// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
											map.setCenter(coords);
										}
									});
				</script>

0개의 답변

#kakaomap 목록