원에 이벤트 등록 방법

카카오맵 API (지도/로컬)
1

http://apis.map.kakao.com/web/sample/addPolygonMouseEvent2/
이 샘플 보고 다각형이 아닌 원에 커서를 올리면 이벤트가 나오게 하고싶습니다.

예제를 변형한 것은
1차시도 실패 - 지도는 표시되나 원이 표기 안됨.

var areas = [
{
name : ‘용산구’,
path : [
new kakao.maps.LatLng(37.5548768201904, 126.96966524449994),
]
}, {
name : ‘성북구’,
path : [
new kakao.maps.LatLng(37.63654916557213, 126.98446028560235)
]
}, {
name : ‘성동구’,
path : [
new kakao.maps.LatLng(37.57275246810175, 127.04241813085706),
]
}, {
name : ‘마포구’,
path : [
new kakao.maps.LatLng(37.59079311146897, 126.88205386700724)
]
}
];
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 8 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption),
customOverlay = new kakao.maps.CustomOverlay({}),
infowindow = new kakao.maps.InfoWindow({removable: true});
for (var i = 0, len = areas.length; i < len; i++) {
displayArea(areas[i]);
}
function displayArea(areas) {
var circle = new kakao.maps.Circle({
map: map,
center: areas.path,
radius:55,
strokeWeight: 2,
strokeColor: ‘#004c80’,
strokeOpacity: 0.8,
fillColor: ‘#fff’,
fillOpacity: 0.7
});
}

2차시도 루프문 추가 - 실패

for (let i = 0; i < areas.length; i++) {
var circle = new kakao.maps.Circle({
map: map, // 다각형을 표시할 지도 객체
center: areas[i].path,
radius:55,
strokeWeight: 2,
strokeColor: ‘#004c80’,
strokeOpacity: 0.8,
fillColor: ‘#fff’,
fillOpacity: 0.7
});

어떻게 해야 할까요? ㅠㅠ

2

Circle 은 중심좌표가 1개로 그려지는 것이라서 Areas.path 가 배열로 묶이지 않고 좌표 하나여야 되지 않을까요?

3

areas[i].path[0]으로 배열의 0번째 값을 넣으면 원이 생성됩니다.
아래 소스코드 함께 참고해주세요.

위 답글처럼 circle은 center 좌표 하나로 선언하기 때문에 때문에 배열이 아닌
객체로 선언하면 ( path: new kakao.maps.LatLng(37.59079311146897, 126.88205386700724) )

첨부주신 코드와 같이 areas.path 혹은 areas[i].path로 값을 불러올 수 있습니다.

for(var i=0; i<areas.length; i++){
    displayArea(areas[i]);
}

function displayArea(area) {
    var circle = new kakao.maps.Circle({
        map: map,
        center: area.path[0],
        radius: 55,
        strokeWeight: 2,
        strokeColor: '#004c80',
        strokeOpacity: 0.8,
        fillColor: '#fff',
        fillOpacity: 0.7
	});
}
4

각 원마다(좌표마다) 고유한 이름을 설정하고 싶습니다. name을 path앞에 선언해야 하나요?

5

customOverlay 또는 infowindow를 이용하여 원에 이름을 표출하고 싶다면
content, position, map 등… 선언하셔야 합니다.

제가 위에 첨부한 displayArea(area) 안에 추가로
아래와 같이 infowindow 또는 customOveraly를 선언하면 됩니다.

또한 circle의 이벤트 등록 방법은 polygon과 동일합니다.
circle 생성 시 이벤트를 등록해주세요.
kakao.maps.event.addListener(circle, 'mouseover', function(mouseEvent) {/* do something */});

infowindow로 생성 시

var infowindow = new kakao.maps.InfoWindow({
        map: map,
        position: area.path[0],
        content: area.name
    });

customOverlay로 생성 시

<style>
.label {margin-bottom: 96px;}
.label * {display: inline-block;vertical-align: top;}
.label .left {background: url("http://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_l.png") no-repeat;display: inline-block;height: 24px;overflow: hidden;vertical-align: top;width: 7px;}
.label .center {background: url(http://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_bg.png) repeat-x;display: inline-block;height: 24px;font-size: 12px;line-height: 24px;}
.label .right {background: url("http://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_r.png") -1px 0  no-repeat;display: inline-block;height: 24px;overflow: hidden;width: 6px;}
</style>

var content = '<div class ="label"><span class="left"></span><span class="center">'+area.name+'</span><span class="right"></span></div>';

var customOverlay = new kakao.maps.CustomOverlay({
        map: map,
        position: area.path[0],
        content: content,
        xAnchor: 0.5,
        yAnchor: 0
 });