Showing
1 changed file
with
32 additions
and
7 deletions
| ... | @@ -48,7 +48,7 @@ | ... | @@ -48,7 +48,7 @@ |
| 48 | var mapContainer = document.getElementById('map'), // 지도를 표시할 div | 48 | var mapContainer = document.getElementById('map'), // 지도를 표시할 div |
| 49 | mapOption = { | 49 | mapOption = { |
| 50 | center: new kakao.maps.LatLng(37.350040, 127.108901), // 지도의 중심좌표 | 50 | center: new kakao.maps.LatLng(37.350040, 127.108901), // 지도의 중심좌표 |
| 51 | - level: 3, // 지도의 확대 레벨 | 51 | + level: 4, // 지도의 확대 레벨 |
| 52 | mapTypeId: kakao.maps.MapTypeId.ROADMAP // 지도종류 | 52 | mapTypeId: kakao.maps.MapTypeId.ROADMAP // 지도종류 |
| 53 | }; | 53 | }; |
| 54 | 54 | ||
| ... | @@ -59,23 +59,48 @@ | ... | @@ -59,23 +59,48 @@ |
| 59 | var clusterer = new kakao.maps.MarkerClusterer({ | 59 | var clusterer = new kakao.maps.MarkerClusterer({ |
| 60 | map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 | 60 | map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 |
| 61 | averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 | 61 | averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 |
| 62 | - minLevel: 10 // 클러스터 할 최소 지도 레벨 | 62 | + minLevel: 7 // 클러스터 할 최소 지도 레벨 |
| 63 | }); | 63 | }); |
| 64 | 64 | ||
| 65 | $.get("https://openapi.gg.go.kr/RegionMnyFacltStus?key=145a1e1f1f6a4712876cc7b16c6aeaff&Type=json&CMPNM_NM=편의점&pSize=1000", function (data) { | 65 | $.get("https://openapi.gg.go.kr/RegionMnyFacltStus?key=145a1e1f1f6a4712876cc7b16c6aeaff&Type=json&CMPNM_NM=편의점&pSize=1000", function (data) { |
| 66 | var stores = JSON.parse(data); | 66 | var stores = JSON.parse(data); |
| 67 | var locations = stores.RegionMnyFacltStus[1].row; | 67 | var locations = stores.RegionMnyFacltStus[1].row; |
| 68 | - locations.forEach(function (element) { | 68 | + var markers = locations.map(function (element) { |
| 69 | var marker = new kakao.maps.Marker({ | 69 | var marker = new kakao.maps.Marker({ |
| 70 | position: new kakao.maps.LatLng(element.REFINE_WGS84_LAT, element.REFINE_WGS84_LOGT), | 70 | position: new kakao.maps.LatLng(element.REFINE_WGS84_LAT, element.REFINE_WGS84_LOGT), |
| 71 | - map: map // 마커를 표시할 지도 객체 | 71 | + map: map // 마커를 표시할 지도 객체 |
| 72 | }); | 72 | }); |
| 73 | - console.log(element.REFINE_WGS84_LAT, element.REFINE_WGS84_LOGT); | 73 | + var iwContent = '<div style="padding:5px,text-align=center;"></div>'+ element.CMPNM_NM, // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다 |
| 74 | - // 클러스터러에 마커들을 추가합니다 | 74 | + iwPosition = new kakao.maps.LatLng(element.REFINE_WGS84_LAT, element.REFINE_WGS84_LOGT), //인포윈도우 표시 위치입니다 |
| 75 | - clusterer.addMarkers(marker); | 75 | + iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다 |
| 76 | + | ||
| 77 | + // 인포윈도우를 생성하고 지도에 표시합니다 | ||
| 78 | + var infowindow = new kakao.maps.InfoWindow({ | ||
| 79 | + map: map, // 인포윈도우가 표시될 지도 | ||
| 80 | + position: iwPosition, | ||
| 81 | + content: iwContent, | ||
| 82 | + removable: iwRemoveable | ||
| 83 | + }); | ||
| 84 | + | ||
| 85 | + infowindow.open(map, marker); | ||
| 86 | + return marker; | ||
| 76 | }) | 87 | }) |
| 88 | + | ||
| 89 | + clusterer.addMarkers(markers); | ||
| 90 | + | ||
| 77 | }); | 91 | }); |
| 78 | 92 | ||
| 93 | + //$.get("https://openapi.gg.go.kr/RegionMnyFacltStus?key=145a1e1f1f6a4712876cc7b16c6aeaff&Type=json&CMPNM_NM=편의점&pSize=1000", function (data) { | ||
| 94 | + // var stores = JSON.parse(data); | ||
| 95 | + //var locations = stores.RegionMnyFacltStus[1].row; | ||
| 96 | + //var markers = $(locations.positions).map(function(i, position){ | ||
| 97 | + //return kakao.maps.Marker({ | ||
| 98 | + //position :new kakao.maps.LATLANG(position.lat, position.lng) | ||
| 99 | + //}) | ||
| 100 | + //}) | ||
| 101 | + //clusterer.addMarkers(markers); | ||
| 102 | + //}); | ||
| 103 | + | ||
| 79 | 104 | ||
| 80 | 105 | ||
| 81 | </script> | 106 | </script> | ... | ... |
-
Please register or login to post a comment