Eojin Han

Marker

Props 정리


interface MarkerProps {
    coordinate: Coord
    anchor?: { x: number, y: number }
    pinColor?: string
    rotation?: number
    flat?: boolean
    image?: ImageSourcePropType
    onClick?: () => voidcaption?: { // android only
        text?: string;
        align?: Align;
        textSize?: number;
        color?: string;
        haloColor?: string;
    };
}

마커 찍기

대충 아래처럼 쓰면 됨.

⇒ db에 좌표 저장하고, db에서 좌표값 받아와서 마커 찍도록 하면 됨.


const P0 = { latitude: 37.564362, longitude: 126.977011 };

return(
	<NaverMapView ...>
		<Marker coordinate={P0} pinColor="blue" onClick={() => setModalVisible(true)} />
	</NaverMapView>
);

커스텀 마커

똑같음. 그냥 Marker 컴포넌트에 image prop으로 전달하면 됨.


const P0 = { latitude: 37.564362, longitude: 126.977011 };

return(
	<NaverMapView ...>
		<Marker coordinate={P0} image={require("./pimMarker.png")} onClick={() => setModalVisible(true)} />
	</NaverMapView>
);

가격 받아와서 이미지를 그때그때 생성해서 넘기고 싶은데 어떻게 해야할까?

테스트 전

외부 uri 로도 참조가 가능하므로, 백엔드에서 가격정보를 받아올때 이미지도 같이 생성해서 반환하도록 한다.

백엔드에선 가격정보만 받아오고, 프론트에서 자바스크립트로 이미지를 생성한다. (이상적)

물론 한번 만든 이미지는 로컬 db에 저장해서 재사용 하도록 함.

1을 택하면 백엔드에서 가격 받아오고, 로컬에 아이콘 있는지 확인하느

마커 사용법

Marker

Props 정리

마커 찍기

커스텀 마커