[Google maps JavaScript API] 마커

회사에서 관련된 작업을 해야 할 일이 생겨서 까먹을까봐 오늘 공부한 걸 정리 하려고 한다.

구글 다큐먼트로 공부를 위한 플랫폼도 존재하니 가서 읽어보는 편이 좋겠다.

이 글은 단지 공부용 정리 노트임.

https://developers.google.com/maps/documentation/javascript/overlays

마커 : 지도의 위치를 나타내는 정보.

심볼(Symbols) : 표시되는 기호 모양, 마커의 이미지, 아이콘(icon)이라고 보면 됨. (이미지로도 추가할 수 있음.)

폴리선(Polylines) : 지도에 선으로 표시할 수 있다. 도형은 폴리곤이라고 부르는 듯.

심볼 ex)

var marker = new google.maps.Marker({     //여기에서 마커 객체 생성하며 동시에 맵에 표시하는 듯.

position: {lat:mark['lat'], lng:mark['lon']}, // 마커가 위치할 위도와 경도

map: map,

icon:{

path: google.maps.SymbolPath.CIRCLE,

strokeWeight: 0,

fillOpacity:0.8,

fillColor:color,

scale:4

},

A Symbol는 다음 속성을 지원합니다.

• path( 필수 )는 기호 모양을 정의하는 경로입니다. 미리 정의 된 경로 중 하나를 사용 하거나 SVG 경로 표기법을 사용하여 사용자 정의 경로를 정의 할 수 있습니다 . 참고 : 폴리 라인의 벡터 패스는 22x22px 정사각형 내에 있어야합니다. 패스에이 사각형 외부의 점이 포함 된 경우 기호의 속성을 분수 값 (예 : 0.2)으로 조정하여 결과 축척 점이 사각형 내에 맞춰 지도록해야합니다. google.maps.SymbolPathscale
• anchor마커 또는 폴리선을 기준으로 심볼의 위치를 ​​설정합니다. 심볼 경로의 좌표는 앵커의 x와 y 좌표에 의해 왼쪽과 위로 각각 변환됩니다. 기본적으로 기호는에 고정됩니다 (0, 0). 위치는 심볼의 경로와 동일한 좌표계로 표현됩니다. //?
• fillColor기호의 채우기 색 (즉, 획에 의해 경계가 지정된 영역)입니다. 확장 된 명명 된 색상을 제외한 모든 CSS3 색상이 지원됩니다. 마커의 기호의 경우 기본값은 '검정'입니다. 폴리선의 기호의 경우 기본값은 해당 폴리 라인의 획 색상입니다.
• fillOpacity기호 채우기의 상대적인 불투명도 (즉, 투명도 부족)를 정의합니다. 값의 범위는 0.0 (완전 투명)에서 1.0 (완전 불투명)입니다. 기본값은 0.0입니다.
• rotation시계 방향으로도 단위로 표시 한 기호를 회전시키는 각도입니다. 기본적으로 심볼 마커의 회전 각도는 0이며, 폴리선의 심볼은 그 가장자리에있는 각도만큼 회전됩니다. 폴리 라인에서 심볼의 회전을 설정하면 심볼 회전이 더 이상 곡선의 곡선을 따르지 않도록 고정됩니다.
• scale기호의 크기가 조절되는 양을 설정합니다. 기호 표식의 경우 기본 배율은 1입니다. 배율 조정 후 기호의 크기는 제한적일 수 있습니다. 폴리 라인의 기호의 경우 기본 배율은 폴리 라인의 획 두께입니다. 크기 조정 후 기호는 기호의 앵커를 중심으로 22x22 픽셀의 정사각형 안에 있어야합니다.
• strokeColor기호의 윤곽선의 색입니다. 확장 된 명명 된 색상을 제외한 모든 CSS3 색상이 지원됩니다. 마커의 기호의 경우 기본값은 '검정'입니다. 폴리 라인의 심볼의 경우 기본 색상은 폴리 라인의 획 색상입니다.
• strokeOpacity기호의 획에 대한 상대적 불투명도 (투명도 부족)를 결정합니다. 값의 범위는 0.0 (완전 투명)에서 1.0 (완전 불투명)입니다. 심볼 마커의 경우 기본값은 1.0입니다. 폴리선의 기호의 경우 기본값은 폴리선의 획 불투명입니다.
• strokeWeight기호의 외곽선의 두께를 정의합니다. 기본값은 scale기호입니다.

아래와 같이 마커 하나하나의 색상을 바굴 수도 있다.

function getColor(spd){

if(spd < 17){

return "skyblue";

}else if(spd < 24){

return "green";

}else if(spd < 32){

return "yellow";

}else if(spd < 50){

return "red";

}else{

return "purple";

}

}

...

(생략, typoon.jsp)

function setMarkers(map){

var infowindow = new google.maps.InfoWindow();

for(var i=0; i < markLocation.length; i++){ //모든 마커 갯수만큼 

var mark = markLocation[i];

//마커의 속도값에 따라 색 결정

var color = getColor(mark.wspd);

var marker = new google.maps.Marker({ //여기에서 마커 객체 생성하며 동시에 맵에 표시하는 듯.

position: {lat:mark['lat'], lng:mark['lon']}, // 마커가 위치할 위도와 경도(변수)

map: map,

icon:{

path: google.maps.SymbolPath.CIRCLE,

strokeWeight: 0,

fillOpacity:0.8,

fillColor:color,

scale:4

},

});

...(생략, 여기에다 각 심볼 hover시 event 등을 정의할 수 있다.)

}