[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
해당 사진을 참고 부탁드립니다.
'다각형에 이벤트 등록하기’를 사용하여 서울시 행정 구역을 색깔별로 나누고 싶습니다.
그런데 맨 위에 용산구 행정 경위도 좌표를 넣었고, 아래에는 중구 행정 경위도 경계 좌표를 넣었는데 계속 하나의 구역만 나옵니다. 여러 구역이 동시에 나오려면 어떻게 해야하나요??
또한 서울시 모든 구의 행정 구역 경계 경위도 좌표를 알 수 있을까요?(가능하다면 전국도 알고 싶습니다.
첨부 스크린샷에는 하나의 폴리곤을 그리는 소스만 확인됩니다.
전체 소스를 같이 올려주세요.
모든 행정 구역 경계 좌표 정보는 제공하지 않습니다.
공공데이트 등 다른 출처를 통해 확인하셔야 합니다.
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=ea5c4da1be0c4db650f766d2185effb6"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.5665851, 126.9782038), // 지도의 중심좌표
level: 8, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new kakao.maps.ZoomControl();
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 지도 중심 좌표 변화 이벤트를 등록한다
kakao.maps.event.addListener(map, 'center_changed', function () {
console.log('지도의 중심 좌표는 ' + map.getCenter().toString() +' 입니다.');
});
// 지도 영역 변화 이벤트를 등록한다
kakao.maps.event.addListener(map, 'bounds_changed', function () {
var mapBounds = map.getBounds(),
message = '지도의 남서쪽, 북동쪽 영역좌표는 ' +
mapBounds.toString() + '입니다.';
console.log(message);
});
// 지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(37.56754, 126.98105), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
// 마커 위에 표시할 인포윈도우를 생성한다
var infowindow = new kakao.maps.InfoWindow({
content : '<div style="padding:5px;">인포윈도우 :D</div>' // 인포윈도우에 표시할 내용
});
// 인포윈도우를 지도에 표시한다
infowindow.open(map, marker);
// 지도에 다각형을 표시한다
var polygon = new kakao.maps.Polygon({
map : map, // 다각형을 표시할 지도 객체
path : [
new kakao.maps.LatLng(37.5548768201904, 126.96966524449994),
new kakao.maps.LatLng(37.55308718044556, 126.97642899633566),
new kakao.maps.LatLng(37.55522076659584, 126.97654602427454),
new kakao.maps.LatLng(37.55320655210504, 126.97874667968763),
new kakao.maps.LatLng(37.55368689494708, 126.98541456064552),
new kakao.maps.LatLng(37.54722934282707, 126.995229135048),
new kakao.maps.LatLng(37.549694559809545, 126.99832516302801),
new kakao.maps.LatLng(37.550159406110104, 127.00436818301327),
new kakao.maps.LatLng(37.54820235864802, 127.0061334023129),
new kakao.maps.LatLng(37.546169758665414, 127.00499711608721),
new kakao.maps.LatLng(37.54385947805103, 127.00727818360471),
new kakao.maps.LatLng(37.54413326436179, 127.00898460651953),
new kakao.maps.LatLng(37.539639030116945, 127.00959054834321),
new kakao.maps.LatLng(37.537681185520256, 127.01726163044557),
new kakao.maps.LatLng(37.53378887274516, 127.01719284893274),
new kakao.maps.LatLng(37.52290225898471, 127.00614038053493),
new kakao.maps.LatLng(37.51309192794448, 126.99070240960813),
new kakao.maps.LatLng(37.50654651085339, 126.98553683648308),
new kakao.maps.LatLng(37.50702053393398, 126.97524914998174),
new kakao.maps.LatLng(37.51751820477105, 126.94988506562748),
new kakao.maps.LatLng(37.52702918583156, 126.94987870367682),
new kakao.maps.LatLng(37.534519656862926, 126.94481851935942),
new kakao.maps.LatLng(37.537500243531994, 126.95335659960566),
new kakao.maps.LatLng(37.54231338779177, 126.95817394011969),
new kakao.maps.LatLng(37.54546318600178, 126.95790512689311),
new kakao.maps.LatLng(37.548791603525764, 126.96371984820232),
new kakao.maps.LatLng(37.55155543391863, 126.96233786542686),
new kakao.maps.LatLng(37.5541513366375, 126.9657135934734),
new kakao.maps.LatLng(37.55566236579088, 126.9691850696746),
new kakao.maps.LatLng(37.5548768201904, 126.96966524449994)
],
fillColor: '#FF0000', // 채움 색
fillOpacity: 0.5, // 채움 불투명도
strokeWeight: 3, // 선의 두께
strokeColor: '#FF0000', // 선 색
strokeOpacity: 0.9, // 선 투명도
strokeStyle: 'solid' // 선 스타일
});
</script>