정리왕 Ag

정말 간단한거지만

전 api를 사용하는 방법을 몰랐죠,,,

카페를 너무 좋아해서 다 메모 해놓으며

약속 전 날 매일 메모와 지도

그리고 인스타에서 사람들이

어떤 사진을 찍었는지 보면서

카페를 다녔는데

너무 불편해서 만들게 되었어요!!

그래서 강제로 API도 알게 되었습니다 

๑'ٮ'๑

(카페에 진심인 녀자)

나중에 여행 갈 곳도 추가 할려고 이렇게 메뉴판으로

나눠 놓았어요

그리고 지역버튼을 누르면 드롭다운메뉴로 세부지역을 고르게

해 놓았습니다.

클릭하고 들어가 보면

대부분 모바일로

보는 사람이 많기 때문에

모바일 사이즈도 따로 설정 해줬어요.

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  #back, #list, #menu, #container, #wrap{
    width: 100%;
  }
  #map{
    margin-top: 5px;
    width: 90%;
    height: 300px;
  }
  #wrap{ //지도+목록 감싸는 박스
    display: block;
    margin-bottom: 100px;
  }
}

그리고 버튼을 누르면

해당하는 구 또는 지역에 해당하는 목록만 보여주도록

제이쿼리를 이용해 구현해 보았습니다

이렇게 선택하면

목록이 바뀌었어요

<script>

 $(document).ready(function () {
        $("#id명").click(function () {
          $("보여줄요소의 #id또는 .클래스명").show();
          $("#id/ .클래스명").hide();
          $("#id/ .클래스명").hide(); //숨길목록의 id와 클래스명
        });
      });

</script>

카페 목록을 추가할때 이미 사이즈나 flex 설정할때 이미 id로 써서 저는 class명도 추가해서 지역마다 동일한 클래스이름을 사용하여 기능을 구현했습니다.

+ 저기 인스타그램글씨를 누르면 해당 카페 사진이 보이도록 했어요!

링크 클릭!

http://silverline.dothome.co.kr/

 - 여러 마크 표시하기 source 

<div id="map" style="width:100%;height:350px;"></div>

<script>
//지도생성
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };
var map = new kakao.maps.Map(mapContainer, mapOption);

// 마커를 표시할 위치와 title 객체 배열입니다 
var positions = [
    {
        title: '카카오', 
        latlng: new kakao.maps.LatLng(33.450705, 126.570677)
    },
    {
        title: '생태연못', 
        latlng: new kakao.maps.LatLng(33.450936, 126.569477)
    },
    {
        title: '텃밭', 
        latlng: new kakao.maps.LatLng(33.450879, 126.569940)
    },
];

for (var i = 0; i < positions.length; i ++) { 
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image : markerImage // 마커 이미지 
    });
}
</script>

 - 마커에 인포윈도우 표시하기 source 

<scriopt>
// 지도생성
// 마커를 표시할 위치와 title 객체 배열입니다
  var positions = [
    {
      iwContent: "<div>카카오</div>",
      latlng: new kakao.maps.LatLng(33.450705, 126.570677),
    },
    {
      iwContent: "<div>생태연못</div>",
      latlng: new kakao.maps.LatLng(33.450936, 126.569477),
    },
    {
      iwContent: "<span>근린공원</span>",
      latlng: new kakao.maps.LatLng(33.451393, 126.570738),
    },
  ];
  
  for (var i = 0; i < positions.length; i++) {
    // 마커생성
    var marker = new kakao.maps.Marker({
      map: map, // 마커를 표시할 지도
      position: positions[i].latlng, // 마커를 표시할 위치
    });
    
    //인포윈도우생성
    var infowindow = new kakao.maps.InfoWindow({
      position: positions[i].latlng, //인포윈도우 위치
      content: positions[i].iwContent, //인포윈도우 내용
    });
    infowindow.open(map, marker);
  }
  </scriopt>

 - 조합하여 여러 마커와 여러 인포윈도우 Source 

<script>
//지도생성 
// 마커가 표시 위치입니다 
var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

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

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

var iwContent = '<div style="padding:5px;">Hello World! <br><a href="https://map.kakao.com/link/map/Hello World!,33.450701,126.570667" 
						style="color:blue" target="_blank">큰지도보기</a>
                        	<a href="https://map.kakao.com/link/to/Hello World!,33.450701,126.570667" style="color:blue" target="_blank">길찾기</a></div>', 
                            	// 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
    iwPosition = new kakao.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치
    
// 인포윈도우를 생성
var infowindow = new kakao.maps.InfoWindow({
    position : iwPosition, 
    content : iwContent 
});
  
// 마커 위에 인포윈도우를 표시. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker); 
</script>

 -> 결과

  : div의 넓이를 조절하고 싶어서 개발자 도구로 보았더니 별도의 id나 class가 없고 카카오 자체소스에서 element style div넓이를 정해 놓은듯 해보여 방법이 필요

음,, 안되네요.. 혹시 아시는분 댓글좀 남겨주세요 ⸝⸝• ̫•⸝⸝

사전 준비 사항

1. https://developers.kakao.com/ 사이트에서 키를 발급하고 JavaScript 키를 복사한 후
2. https://apis.map.kakao.com/ 에 접속하여 필요한 api를 찾는다.
3. 무료 도메인 사이트 만든 후 filezilla 다운 (dothome에서 무료)
4. 서버관리자로 꼭 index.html 파일을 포함하여 업로드 

지도 + 마커표시

지도에 표시하고 싶은 장소의 위도,경도를 찾아 배열로 저장

(구글 지도에 접속 후 우클시 좌표 뜸)

사이트 접속시 위치들이 한번에 보이도록 중심좌표는 지도에서 가운데를 찾아 center에 적어 줌

지도 레벨 조절 버튼

튤팁

이렇게 여러 api를 조합하다 보면 코드 규칙성도 찾을 수 있어서

자유롭게 쓸 수 있을 것 같아요

filezilla에 파일 업로드시 index 파일이 없다면

오류가 발생하기 때문에

꼭 포함해서 업로드!

코드 수정 후 반영하고 싶다면 우클 후 업로드 or 파일 선택 후 엔터