การใช้ MapView: แสดงแผนที่ในแอป

React Native ฉบับเริ่มต้น: สร้างแอปมือถือข้ามแพลตฟอร์ม - ตอนที่ 18: การใช้ MapView: แสดงแผนที่ในแอป

สวัสดีครับทุกคน! ในบทความนี้ เราจะมาเรียนรู้วิธีการเพิ่มแผนที่ลงในแอปพลิเคชัน React Native ของเรา โดยใช้ MapView Component ซึ่งเป็นส่วนหนึ่งของไลบรารี react-native-maps ครับ ก่อนที่เราจะเริ่มกัน มาทบทวนกันสักนิดว่าในบทที่แล้ว เราได้พูดถึงเรื่องอะไรกันไปบ้าง

ในบทที่แล้ว เราได้เจาะลึกเรื่อง Redux ซึ่งเป็นเครื่องมือจัดการ State ส่วนกลางสำหรับแอปพลิเคชัน React Native ขนาดใหญ่ ที่มี Component ซับซ้อนและต้องการการจัดการ State ที่เป็นระบบระเบียบ Redux ช่วยให้ State ของแอปพลิเคชันมีความคาดเดาได้ง่ายขึ้น และ Debug ได้ง่ายขึ้น แม้ว่าการใช้งาน Redux จะต้องเขียน Boilerplate Code ค่อนข้างมาก แต่ก็คุ้มค่าสำหรับแอปพลิเคชันที่มีความซับซ้อนสูงครับ

ในบทนี้ เราจะพักเรื่องการจัดการ State ที่ซับซ้อน แล้วมาสนุกกับการเพิ่มแผนที่ลงในแอปพลิเคชันของเรากันบ้างครับ การแสดงแผนที่ในแอปพลิเคชันเป็นฟีเจอร์ที่ได้รับความนิยมอย่างมาก โดยเฉพาะอย่างยิ่งสำหรับแอปพลิเคชันที่เกี่ยวข้องกับการเดินทาง สถานที่ หรือการค้นหาต่างๆ

ทำไมต้องใช้ MapView?

การใช้ MapView ช่วยให้เราสามารถแสดงแผนที่แบบ Interactive ในแอปพลิเคชันของเราได้ ทำให้ผู้ใช้สามารถซูม เลื่อน และสำรวจแผนที่ได้ นอกจากนี้ เรายังสามารถเพิ่ม Marker (หมุด) บนแผนที่ เพื่อระบุตำแหน่งที่สำคัญต่างๆ ได้อีกด้วย

แต่ก่อนที่เราจะเริ่มใช้งาน MapView ได้นั้น เราจำเป็นต้องติดตั้งไลบรารี react-native-maps ก่อนครับ

การติดตั้ง react-native-maps

react-native-maps เป็นไลบรารีที่ช่วยให้เราสามารถใช้งานแผนที่ใน React Native ได้อย่างง่ายดาย โดยไลบรารีนี้จะใช้ Native Map View ของแต่ละแพลตฟอร์ม (เช่น Google Maps สำหรับ Android และ Apple Maps สำหรับ iOS) เพื่อให้ได้ประสิทธิภาพที่ดีที่สุด

ในการติดตั้ง react-native-maps ให้เปิด Terminal หรือ Command Prompt แล้วรันคำสั่งต่อไปนี้:

npm install react-native-maps
# หรือ
yarn add react-native-maps

หลังจากติดตั้งเสร็จแล้ว เราจะต้องทำการ Link ไลบรารีนี้เข้ากับ Project ของเราด้วยครับ สำหรับ React Native version 0.60 ขึ้นไป ส่วนใหญ่จะ Auto-link ให้เอง แต่ถ้าไม่ได้ผล อาจจะต้องทำการ Link เอง โดยทำตามขั้นตอนใน documentation ของ react-native-maps ครับ

**สำคัญ:** สำหรับ iOS คุณจะต้องติดตั้ง Pods ด้วยนะครับ โดยให้เข้าไปที่โฟลเดอร์ ios ใน Project ของคุณ แล้วรันคำสั่ง pod install

cd ios
pod install

และสำหรับ Android คุณอาจจะต้องเพิ่ม API Key ของ Google Maps ใน AndroidManifest.xml ด้วยนะครับ (ถ้าคุณต้องการใช้ Google Maps) รายละเอียดเพิ่มเติมอยู่ใน documentation ของ react-native-maps เช่นกันครับ

การแสดงแผนที่

เมื่อเราติดตั้งและ Link react-native-maps เรียบร้อยแล้ว เราก็สามารถเริ่มใช้งาน MapView Component ได้เลยครับ

ขั้นแรก ให้ Import MapView จาก react-native-maps:

import MapView from 'react-native-maps';

จากนั้น เราสามารถใช้ MapView Component ใน JSX ของเราได้เลยครับ:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
}

ในตัวอย่างนี้ เราได้สร้าง Component ชื่อ App ซึ่ง render MapView Component ภายใน View Component ครับ

• initialRegion prop ใช้สำหรับกำหนดตำแหน่งเริ่มต้นของแผนที่ โดยเราจะต้องระบุ latitude (ละติจูด), longitude (ลองจิจูด), latitudeDelta (ความกว้างของแผนที่ในแนวตั้ง) และ longitudeDelta (ความกว้างของแผนที่ในแนวนอน)
• style prop ใช้สำหรับกำหนด Style ของ MapView Component โดยเราได้กำหนดให้ MapView เต็มพื้นที่ของ View Component

เมื่อรันแอปพลิเคชัน เราจะเห็นแผนที่แสดงขึ้นมาครับ โดยแผนที่จะเริ่มต้นที่ตำแหน่งที่ระบุใน initialRegion prop

การเพิ่ม Marker บนแผนที่

เราสามารถเพิ่ม Marker บนแผนที่ เพื่อระบุตำแหน่งที่สำคัญต่างๆ ได้ โดยใช้ Marker Component ซึ่งเป็น Child Component ของ MapView ครับ

import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker
          coordinate={{
            latitude: 37.78825,
            longitude: -122.4324,
          }}
          title="My Marker"
          description="Some description"
        />
      </MapView>
    </View>
  );
}

ในตัวอย่างนี้ เราได้เพิ่ม Marker Component ภายใน MapView Component ครับ

• coordinate prop ใช้สำหรับกำหนดตำแหน่งของ Marker โดยเราจะต้องระบุ latitude และ longitude
• title prop ใช้สำหรับกำหนด Title ของ Marker
• description prop ใช้สำหรับกำหนด Description ของ Marker

เมื่อรันแอปพลิเคชัน เราจะเห็น Marker แสดงขึ้นมาบนแผนที่ครับ เมื่อเราแตะที่ Marker เราจะเห็น Title และ Description ที่เราได้กำหนดไว้

Trade-offs และแนวปฏิบัติที่ดี

การใช้ react-native-maps มีข้อดีคือช่วยให้เราสามารถแสดงแผนที่ในแอปพลิเคชันของเราได้อย่างง่ายดาย แต่ก็มีข้อเสียบางประการที่เราควรพิจารณา:

• **Performance:** การแสดงแผนที่อาจทำให้แอปพลิเคชันของเราทำงานช้าลง โดยเฉพาะอย่างยิ่งถ้าเรามี Marker จำนวนมาก บนแผนที่ ดังนั้น เราควร Optimize Performance โดยการใช้ Clustering (การรวม Marker ที่อยู่ใกล้กันเป็นกลุ่ม) หรือการ Load Marker เฉพาะที่อยู่ใน Viewport เท่านั้น
• **Dependency:** react-native-maps เป็น Native Module ซึ่งหมายความว่าเราจะต้องทำการ Link ไลบรารีนี้เข้ากับ Project ของเรา และอาจจะต้องแก้ไข Native Code บ้าง ซึ่งอาจเป็นเรื่องที่ยุ่งยากสำหรับผู้ที่ไม่มีประสบการณ์ในการพัฒนา Native App
• **Platform Differences:** การทำงานของ react-native-maps อาจแตกต่างกันบ้างในแต่ละ Platform (iOS และ Android) ดังนั้น เราควรทดสอบแอปพลิเคชันของเราบนทั้งสอง Platform เพื่อให้แน่ใจว่าทุกอย่างทำงานได้อย่างถูกต้อง

นอกจากนี้ ยังมีแนวปฏิบัติที่ดีที่เราควรทำตามเมื่อใช้งาน react-native-maps:

• **Use Memoization:** ใช้ React.memo หรือ useMemo เพื่อป้องกันการ Render MapView และ Marker Component ซ้ำๆ โดยไม่จำเป็น
• **Lazy Load:** Load ข้อมูลแผนที่ (เช่น Marker) เฉพาะเมื่อจำเป็นเท่านั้น
• **Caching:** Cache ข้อมูลแผนที่ (เช่น Tiles) เพื่อลดการ Load ข้อมูลจาก Network ซ้ำๆ

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการเพิ่มแผนที่ลงในแอปพลิเคชัน React Native ของเรา โดยใช้ MapView Component จากไลบรารี react-native-maps เราได้เรียนรู้วิธีการติดตั้งไลบรารี, การแสดงแผนที่, การเพิ่ม Marker บนแผนที่ และ Trade-offs และแนวปฏิบัติที่ดีในการใช้งาน react-native-maps

ในบทความต่อไป เราจะมาเรียนรู้เรื่อง Permissions: การขอสิทธิ์การเข้าถึงต่างๆ ใน React Native กันครับ แล้วพบกันใหม่ในบทความหน้า!