커스텀 로딩 컴포넌트

지도의 로딩중에 나오는 화면을 커스텀 컴포넌트로 대체할 수 있습니다.

import { MapMarkerWrapper, Position } from '@mint-ui/map';
import React from 'react';

import { MintMap } from './common/BaseMap';

const LoadingComponent = () => (
  <div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
    로딩중입니다...
  </div>
);

export function CustomLoading() {
  return (
    <MintMap
      base={{ center: new Position(37.504497373023206, 127.04896282498558), zoomLevel: 16 }}
      mapLoadingComponent={LoadingComponent}
    >
      {/* Your marker */}
      <MapMarkerWrapper position={new Position(37.504497373023206, 127.04896282498558)}>

        {/* Your marker elements */}
        <div style={{ width: '10px', height: '10px', background: 'red', borderRadius: '10px' }} />

      </MapMarkerWrapper>
    </MintMap>
  );
}

GoogleNaver

로딩중입니다...