지도 위 커스텀 버튼 생성

지도 위 커스텀 버튼 생성

잘못 생각했던 점

1. 네이버 지도 위에 그려야하니, <NaverMapView> </NaverMapView> 컴포넌트 안에 넣어야겠지?

⇒ 별도 공간정의 없이 아이콘 버튼을 넣으면 원하던 모습과 비슷하게 구현은 되나, 빈번하게 뭉개짐.

//네이버 지도
<NaverMapViw style={{width:'100%', height:'100%'}}>
	{/*지도 내부에 아이콘 설정*/}
	<View>
		아이콘버튼들
	</View>
</NaverMapViw>

 

2. 그러면 <NaverMapViw> 내부의 <View>에 공간을 정의하고 아이콘 버튼 넣으면 되겠네?

//네이버 지도
<NaverMapViw style={{width:'100%', height:'100%'}}>
	//지도 내부에 아이콘 설정
	<View style={{flex:1 또는 width, height으로 공간정의}}>
		아이콘버튼들
	</View>
</NaverMapViw>

⇒ 어차피 지도는 width:'100%', height:'100%' 니까 부모요소 공간의 전체에 출력되어, 아이콘을 위한 공간을 별도 정의해도 지도는 전체화면을 유지하므로 언뜻 잘 됐다고 생각할 순 있음.

⇒ 아이콘을 위해 할당한 공간에는 지도에 대한 터치가 먹히지 않음.

(flex:1으로 할당했으면 전체화면이 터치 안먹히고, width&height로 할당했으면 그 공간만 안됨)

 

3. 어차피 지도는 width:'100%', height:'100%' 이므로 부모요소의 공간 전체를 사용하므로, 형제 요소로는 따로 빼내도 지도가 전체화면에 꽉 차는 데 영향이 없다.

따라서 아이콘 버튼을 위한 View를 형제요소로 빼서 만들면 됨.

• 문제는 지도보다 아이콘을 먼저 선언했을 때

<View style={{flex:1}}>
	{/*지도랑 형제요소로 빼냄.*/}
	<View style={{position: 'absolute', top: 10}}>
		아이콘버튼들
	</View>

	{/*네이버 지도*/}
	<NaverMapViw style={{width:'100%', height:'100%'}}>
	</NaverMapViw>
</View>

⇒ 뒤에 있는 요소가 화면의 앞(front)에 나오므로, 아이콘 버튼들이 지도에 묻힘.

 

구현 완료 영상

정상동작 소스코드

• PNaverMap.js

import React, { useState } from 'react'
import { Text, View, Image, ImageBackground, Alert, StyleSheet } from 'react-native';
import NaverMapView, { Circle, Path, Polyline, Polygon, Marker } from 'react-native-nmap'

import { PIconButtonM } from '../../PComponents/PIconButtons'
import { PModalSummary } from './PModalSummary'
import { PMarker } from './PMarker'
import { PModalList } from './PModalList';

export function PNaverMap({ setModalVisible, setListModalVisible }) {
    const P0 = { latitude: 37.564362, longitude: 126.977011 };
    const P1 = { latitude: 37.565051, longitude: 126.978567 };
    const P2 = { latitude: 37.565383, longitude: 126.976292 };

    return (
        <View style={{ flex: 1 }}>
            {/* 네이버 지도 */}
            <NaverMapView style={{ width: '100%', height: '100%' }}
                //<NaverMapView style={{ flex:1 }}
                showsMyLocationButton={false}
                center={{ ...P0, zoom: 16 }}

                //로깅용
                // onTouch={e => console.warn('onTouch', JSON.stringify(e.nativeEvent))}
                // onCameraChange={e => console.warn('onCameraChange', JSON.stringify(e))}
                // onMapClick={e => console.warn('onMapClick', JSON.stringify(e))}

                useTextureView
            >
                <Marker coordinate={P0} onClick={() => setModalVisible(true)} />
                <Marker coordinate={P1} pinColor="blue" onClick={() => setModalVisible(true)} />
                <Marker coordinate={P2} onClick={() => setModalVisible(true)} image={require("./pimMarker.png")} width={50} height={50} />
            </NaverMapView>

            {/* 지도 위 옵션 버튼들 */}
            <View style={{ justifyContent: 'flex-start', alignItems: 'flex-start', position: 'absolute', top: 10 }}>
                <PIconButtonM iconName="note-multiple-outline" text="모아보기" iconColor="ivory" onPress={() => setListModalVisible(true)} iconStyle={styles.button} />
                <PIconButtonM iconName="crosshairs-gps" text="현재위치" iconColor="ivory" iconStyle={styles.button} />
            </View>

        </View>
    );
}

const styles = StyleSheet.create({
    button: {
        backgroundColor: "#009900", borderRadius: 10, padding: 5, margin: 5,
        shadowColor: "gray",
        shadowOffset: {
            width: 2,
            height: 2,
        },
        shadowOpacity: 1,
        shadowRadius: 2,
    }
})