## Marker
Baidu map의 특정 위치에 marker을 표시하는 방법에 대해서 알아보도록 한다.

1. 모델링 화면의 컴포넌트 툴바의 etc 내의 bmap-marker 컴포넌트를 클릭하여 생성한다.
   ![비맵 마커 컴포넌트 선택][baidu_map_component_3]

1. 모델링 화면 우측 속성창의 4번째 탭에서 bmap-marker의 속성을 설정해준다.
   ![비맵 마커 속성 선택][baidu_map_component_4]

제일 위의 Target Map에 marker가 표시될 baidu map의 id 값을 입력한다.

위도와 경도를 설정해주어, 표시하고 싶은 위치에 bmap-marker을 생성할 수 있다.

[baidu_map_component_3]: ../images/baidu_map_3.png
[baidu_map_component_4]: ../images/baidu_map_4.png

---

## Detail popup

Baidu map에 표시되어 있는 bmap-marker을 통해 info.window 컴포넌트를 활용하여 상세 정보를 제공하는 방법을 알아보도록 한다.

1. 모델링 화면의 컴포넌트 툴바 etc 내의 info.window 컴포넌트를 클릭하여 생성한다.
   ![인포윈도우 컴포넌트 선택][baidu_map_component_5]

1. 우측 속성창의 4번째 탭에서 info.window에 표시될 내용을 입력한다.
   ![인포윈도우 속성 선택][baidu_map_component_6]

1. bmap-marker의 속성창 3번째 탭으로 이동하여, 이벤트 내용을 입력한다.
   ![인포윈도우 이벤트 설정][baidu_map_component_7]
    - 마우스 오버 이벤트 발생시에는 호버 이벤트에, 클릭 이벤트의 경우에는 탭 이벤트에 이벤트 내용을 입력한다. 
    
    - 정보창 값에는 앞서 생성한 info.window의 id 값을 입력해주고, 변수정보는 open infowindow를 선택한다.

1. 미리보기 화면에서 bmap-marker 클릭시 info.window창이 뜨는 것을 확인한다.
   ![미리보기 화면 확인][baidu_map_component_8]

[baidu_map_component_5]: ../images/baidu_map_5.png
[baidu_map_component_6]: ../images/baidu_map_6.png
[baidu_map_component_7]: ../images/baidu_map_7.png
[baidu_map_component_8]: ../images/baidu_map_8.png
