Showing
1 changed file
with
31 additions
and
6 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