맨위로가기
 

SBCHART

닫기

extend.map.mapMarker

#2.0.140

맵 영역에 마커의 사용여부를 설정합니다.
실제 marker를 그리기 위해서는 jsonMarker에 마커에 대한 설정을 필요로 합니다.

  • Type : Object
  • Format
    extend: {
        map: {
            mapMarker: {
                show: true,
            	jsonMarker: [
    		{"id":"mkr-001", "type": "circle","radius":"15", "useLatLon":"true", "position": [ {"x":127.849372797291494,"y":36.039663414990983}], "label":"충북", "fillColor":"#00FFAB", "fillOpacity":"0.2"},
    		{"id":"mkr-img-001", "type": "image", "imageUrl":"./images/map-pin1.png", "useLatLon":"true", "position": [ {"x":126.9152195932067,"y":37.440055999842087}], 'label':"출발", "fontColor":"red"},
    		{"id":"mkr-line-001","type": "line",  "strokeColor":"blue", "strokeOpacity":"1", "strokeWidth":"5", "strokeStyle":"dashed","useArrow":"true", useLatLon:"true",  "position": [ {"x":126.9152195932067,"y":37.440055999842087}, {"x":129.081740279074182,"y":35.077713820938776} ] },					
            	],
            	useLatLon: true,
            	defaultValue:{ radius:10, labelColor:"red", fontSize:26, fontWeight:"bold"},
            	useEvent: true,
            	markerClick: function(param){
            		console.log("parameter = ", param)
            	},
            	useTooltip: true,
            	markerTooltip: function(param){
            		return "id: "+param.id
            	},        	
            }
        }
    }
    

extend.map.mapMarker.show

#2.0.140

맵 영역에 마커의 사용여부를 설정합니다.
마커는 현재 circle, image, line의 형태를 지원합니다.

  • Type : Boolean
  • Default : false

extend.map.mapMarker.useLatLon

#2.0.140

마커의 위치를 설정할때 pixel을 기준으로 설정할 것인지, 위도/경도를 기준으로 사용할지를 설정합니다.
true로 설정시 위도/경도값을 갖고 pixel값으로 변환하여 위치를 설정합니다.
jsonMarker에서 각각의 marker에 대해서 따로 설정이 가능합니다.(우선순위가 jsonMarker에서 설정하는 것이 높습니다)

  • Type : Boolean
  • Default : false

extend.map.mapMarker.defaultValue

#2.0.140

Object타입으로서, 마커들의 기본 설정값을 정의합니다.

  • json :
    • "radius " : circle타입의 경우 default반지름을 설정합니다.
    • "fillColor, fillOpacity, strokeColor, strokeWidth, strokeOpacity, strokeStyle" : 도형이나 선의 외곽선 및 내부영역에 대해 설정합니다.
    • "width, height" : image타입의 경우, 이미지의 기본width/height값을 설정합니다. ( default : 20/30)
    • "labelColor, fontSize, fontWeight" : label의 색상 및 font-size, font-weight를 설정합니다.
    • "y" : circle의 y축 방향으로 조절할 값입니다.
    • "color" : circle 영역에 background 색상을 지정합니다.

extend.map.mapMarker.useEvent

#2.0.140

마커들에게 이벤트를 줄것인지를 설정합니다.
여기서 true로 설정하게 되면, marker뒤의 map영역에 대한 click이나 mouse over등의 처리가 되지 않습니다.

  • Type : Boolean
  • Default : false

extend.map.mapMarker.makerClick

#2.0.140

마커를 click시에 callback함수를 설정합니다.
useEvent를 true로 설정해야 합니다.
function 또는 전역함수의 string 값으로 설정합니다.

  • Type : String | function

extend.map.mapMarker.useTooltip

#2.0.140

마커들에게 Tooltip을 사용할 지를 설정합니다.
여기서 true로 설정하게 되면, marker영역에 마우스 hover시의 tooltip을 표시합니다.

  • Type : Boolean
  • Default : false

extend.map.mapMarker.makerClick

#2.0.140

마우스Hover시의 tooltip을 설정할 수 있습니다. (default는 id를 표시합니다)
useTooltip를 true로 설정해야 합니다.
parameter로 jsonMarker에서 설정한 id, type등의 값들을 object형태로 전달 받습니다.

  • Type : String | function

extend.map.mapMarker.jsonMarker

#2.0.140

Marker들에 대한 정보를 갖고 있는 Object들로 구성된 배열형식 입니다.
id, type, position은 필수 사항이고, 각 type별로 option사항들이 있습니다.
id는 unique한 값이어야 하며, 추후에 수정 및 삭제등을 동적으로 처리할 수 있습니다.

  • json :
    • "type" : circle, image, line 이렇게 3가지를 지원합니다
    • "position" : [{x,y}]처럼 좌표형식의 object로 구성된 배열입니다. Line의 경우 2개의 좌표값 필요. pixel단위이거나 위도/경도단위로 입력. useLatLon으로 어떤좌료를 사용할 지 설정합니다.
    • "radius " : circle타입일 경우의 반지름을 설정합니다. default값은 5 입니다.
    • "width" : image타입일 경우의 width(이미지 넓이)를 설정합니다. default값은 20 입니다.
    • "height" : image타입일 경우의 height(이미지 높이)를 설정합니다. default값은 30 입니다.
    • "fillColor" : circle타입일 경우의 내부영역의 색상을 설정합니다.
    • "fillOpacity" : circle타입일 경우의 내부영역의 투명도를 설정합니다. ( 범위 : 0 ~ 1 )
    • "strokeColor" : circle/line타입일 경우의 외곽선(선)의 색상을 설정합니다.
    • "strokeOpacity" : circle/line타입일 경우의 외곽선(선)의 투명도를 설정합니다. ( 범위 : 0 ~ 1 )
    • "strokeWidth" : circle/line타입일 경우의 외곽선(선)의 두께를 설정합니다.
    • "strokeStyle" : circle/line타입일 경우의 외곽선(선)의 Style을 설정합니다. (dashed, dotted, normal만 처리가능)
    • "useArrow" : line타입일 경우 첫번째에서 두번째좌표 방향으로 화살표를 보여줄 지를 설정합니다.
    • "label(공통)" : 각 marker의 라벨을 설정합니다. 라벨의 위치는 circle의 경우 중점이 라벨의 가운데, image인 경우 center-bottom이 라벨의 가운데, line의 경우 선의 중점이 라벨의 가운데에 위치합니다.
    • "labelColor(공통)" : 라벨의 색상을 설정합니다. default값은 black입니다.
    • "fontSize(공통)" : 라벨의 크기(font-size)를 설정합니다.
    • "fontWeight(공통)" : 라벨의 두께(font-weight)를 설정합니다. 현재는 normal, bold만 처리합니다.