กําหนดค่าแผนที่

ภาพรวมนี้จะอธิบายวิธีกำหนดค่าแผนที่ที่เพิ่มลงในแอป iOS โดยใช้ Maps SDK สำหรับ iOS

ภาพรวม

หลังจากเพิ่มแผนที่ลงในแอปแล้ว คุณจะกำหนดค่าตัวเลือกเริ่มต้นและการตั้งค่ารันไทม์ของแผนที่ได้ ดูรายละเอียดเกี่ยวกับการเพิ่มคอนเทนเนอร์แผนที่ได้ที่เพิ่มแผนที่

การตั้งค่าแผนที่เบื้องต้นมีดังนี้

• ตำแหน่งของกล้อง ซึ่งรวมถึงตำแหน่ง การซูม การเอียง และการเอียง ดูรายละเอียดเกี่ยวกับการวางตำแหน่งกล้องใน กล้องและมุมมอง
• สีพื้นหลังของแผนที่
• ประเภทแผนที่
• คอมโพเนนต์ UI ที่จะแสดง เช่น ปุ่มซูมและเข็มทิศ
• ท่าทางสัมผัสเพื่อเปิดใช้

ขณะรันไทม์ คุณจะกำหนดการตั้งค่าเหล่านี้และการตั้งค่าการเพิ่มบางรายการได้โดยการอัปเดตออบเจ็กต์ GMSMapView

ตัวเลือกแผนที่

เมื่อเริ่มต้นมุมมองแผนที่ ตัวเลือกการกำหนดค่าจะตั้งค่าเป็น GMSMapViewOptions พร็อพเพอร์ตี้ตัวเลือกประกอบด้วย frame, camera, mapID หรือ backgroundColor

กำหนดค่าตัวเลือกแผนที่

คุณจะตั้งค่าพร็อพเพอร์ตี้ตัวเลือกของคุณเอง หรือส่ง GMSMapViewOptions ที่สร้างขึ้นด้วยค่าเริ่มต้นไปยัง GMSMapView โดยตรงก็ได้

let options = GMSMapViewOptions()
options.camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 6)
let mapView = GMSMapView(options:options)

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

ต่อไปนี้คือตัวอย่างการส่งออบเจ็กต์ GMSMapViewOptions ที่มีค่าเริ่มต้นไปยัง GMSMapView โดยตรง

let options = GMSMapViewOptions()
let mapView = GMSMapView(options:options) //initialized with default values

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options]; //initialized with default values

กำหนดค่าสีพื้นหลัง

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

let options = GMSMapViewOptions()
options.backgroundColor = UIColor.yellowColor
let mapView = GMSMapView(options:options)

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.backgroundColor = UIColor.yellowColor;
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

ประเภทแผนที่

คุณสามารถปรับแต่งแผนที่ของคุณด้วยแผนที่ประเภทต่างๆ ประเภทของแผนที่จะกำกับ การแสดงแผนที่โดยรวม ตัวอย่างเช่น แผนที่การเมืองซึ่งเน้นไปที่การแสดงขอบเขต และแผนที่ถนนที่แสดงถนนทั้งหมดของเมืองหรือภูมิภาค Maps SDK สำหรับ iOS มีแผนที่ ประเภทต่อไปนี้

การเปลี่ยนประเภทแผนที่

หากต้องการตั้งค่าประเภทของแผนที่ ให้กำหนดค่าใหม่ให้กับพร็อพเพอร์ตี้ GMSMapView.mapType ตัวอย่างเช่น หากต้องการแสดงประเภทแผนที่ดาวเทียม ให้ทำดังนี้

let options = GMSMapViewOptions()
options.camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 6)
let mapView = GMSMapView(options:options)
mapView.mapType = .satellite

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                  longitude:151.2086
                                                        zoom:6];
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
mapView.mapType = kGMSTypeSatellite;

ตัวเลือกด้านล่างจะแสดงการเปรียบเทียบภูมิประเทศ แผนที่ปกติ และแผนที่แบบผสมสำหรับตำแหน่งเดียวกัน

แผนที่ในอาคาร

ในระดับการซูมสูง Maps SDK สำหรับ iOS จะแสดงแผนผังชั้นสำหรับพื้นที่ในอาคาร เช่น สนามบิน ห้างสรรพสินค้า ร้านค้าปลีกขนาดใหญ่ และสถานีขนส่ง แปลนอาคารในอาคารถูกรวมไว้ในชิ้นส่วนแผนที่เริ่มต้นสำหรับแผนที่ประเภท "ปกติ" (kGMSTypeNormal) และจะเปิดใช้งานโดยอัตโนมัติเมื่อผู้ใช้ซูมเข้าและจางลงเมื่อแผนที่ซูมออก

คุณสามารถปิดใช้งานแผนที่ในอาคารได้โดยการตั้งค่าคุณสมบัติ indoorEnabled ของ GMSMapView เป็น NO

mapView.isIndoorEnabled = false
      

mapView.indoorEnabled = NO;
      

อีกวิธีหนึ่งคือ คุณสามารถปิดใช้งานเพียง ตัวควบคุมเครื่องมือเลือกชั้น

การเพิ่มแปลนอาคาร

แปลนอาคารมีให้บริการในบางพื้นที่ หากไม่มีข้อมูลแปลนอาคารสำหรับอาคารที่คุณต้องการไฮไลต์ในแอปพลิเคชัน คุณสามารถดำเนินการต่อไปนี้

• เพิ่มแผนผังชั้น ลงใน Google Maps โดยตรง ซึ่งจะทำให้แผนของคุณพร้อมใช้งานสำหรับผู้ใช้ Google Maps ทุกคน
• แสดงแผนผังชั้นเป็นการวางซ้อนภาคพื้นดิน ซึ่งจะทำให้เฉพาะผู้ใช้แอปพลิเคชันของคุณดูแปลนอาคารได้

เลเยอร์การจราจร

คุณสามารถทำให้ผู้ใช้ของคุณสามารถดูแผนที่โดยมีข้อมูลความหนาแน่นของการจราจรซ้อนทับอยู่ด้านบนได้ ข้อมูลนี้จะแสดงให้เห็นข้อมูลสรุปภาพ เกี่ยวกับสถานการณ์การจราจรในท้องถิ่น คุณเปิดและปิดเลเยอร์การเข้าชมได้โดยเรียกใช้เมธอด trafficEnabled ตัวอย่างต่อไปนี้แสดงลักษณะที่เลเยอร์การจราจรอาจปรากฏในแผนที่

การช่วยเหลือพิเศษ

โดยค่าเริ่มต้น ระบบจะซ่อนองค์ประกอบการช่วยเหลือพิเศษบนแผนที่ คุณเปิดใช้การช่วยเหลือพิเศษได้โดยตั้งค่าพร็อพเพอร์ตี้ accessibilityElementsHidden ของ GMSMapView เป็น NO ซึ่งทําให้มีการสร้างองค์ประกอบการช่วยเหลือพิเศษสําหรับออบเจ็กต์ซ้อนทับ (เช่น GMSMarker และหน้าต่างข้อมูล GMSPolyline เป็นต้น)

mapView.accessibilityElementsHidden = false
      

mapView.accessibilityElementsHidden = NO;
      

พร็อพเพอร์ตี้นี้เป็นไปตามโปรโตคอล UIAccessibility แบบไม่เป็นทางการ ยกเว้นค่าเริ่มต้นใน Maps SDK สำหรับ iOS คือ YES

ตำแหน่งของฉัน

โดยค่าเริ่มต้น จะไม่มีการแสดงข้อมูลตำแหน่งบนแผนที่ คุณสามารถเปิดใช้จุด "ตำแหน่งของฉัน" สีน้ำเงินและทิศทางเข็มทิศโดยตั้งค่า myLocationEnabled เป็นเปิด GMSMapView

mapView.isMyLocationEnabled = true
      

mapView.myLocationEnabled = YES;
      

การเปิดใช้ฟีเจอร์นี้จะระบุตำแหน่งปัจจุบันของผู้ใช้ผ่านพร็อพเพอร์ตี้ myLocation พร็อพเพอร์ตี้นี้อาจไม่พร้อมใช้งานทันที เช่น หากผู้ใช้ได้รับแจ้งจาก iOS ให้อนุญาตการเข้าถึงข้อมูลนี้ ในกรณีนี้คือ nil

print("User's location: \(String(describing: mapView.myLocation))")
      

NSLog(@"User's location: %@", mapView.myLocation);
      

สิ่งปลูกสร้าง 3 มิติ

เมื่อดูในระยะใกล้ หลายๆ เมืองจะมีสิ่งปลูกสร้าง 3 มิติซึ่งมองเห็นได้จากภาพของเมืองซีแอตเทิล รัฐวอชิงตัน ด้านล่าง

คุณปิดใช้สิ่งปลูกสร้าง 3 มิติได้โดยการตั้งค่าพร็อพเพอร์ตี้ GMSMapView ที่เกี่ยวข้องใน Swift หรือ Objective-C ดังที่แสดงด้านล่าง

mapView.isBuildingsEnabled = false
      

[mapView setBuildingsEnabled:NO];
      

ระยะห่างจากขอบของแผนที่

Google Maps ได้รับการออกแบบมาเพื่อครอบคลุมทั้งภูมิภาคตามที่กำหนดโดย GMSMapView แง่มุมต่างๆ ของลักษณะและการทำงานของแผนที่จะกำหนดโดยมิติข้อมูลของมุมมอง ดังนี้

• เป้าหมายของกล้องแสดงถึงกึ่งกลางของบริเวณเบาะ
• ตัวควบคุมแผนที่ถูกวางตำแหน่งโดยสัมพันธ์กับขอบของแผนที่
• ข้อมูลทางกฎหมาย เช่น ข้อความลิขสิทธิ์ หรือโลโก้ Google จะปรากฏ ที่ขอบด้านล่างของแผนที่

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

• การเคลื่อนที่ของกล้องที่ใช้การเรียก API หรือการกดปุ่ม (เช่น เข็มทิศ ตำแหน่งของฉัน) จะสัมพันธ์กับบริเวณที่มีระยะห่างจากกัน
• GMSMapView.projection แสดงผลการคาดการณ์ที่รวมเฉพาะภูมิภาคที่มีส่วนแทรกเข้ามา
• ตัวควบคุม UI จะหักลบจากขอบของคอนเทนเนอร์ตามจำนวนจุดที่ระบุ

Padding มีประโยชน์เมื่อออกแบบ UI ให้ซ้อนทับบางส่วนของแผนที่ ตัวอย่างเช่น ในภาพจะมีแผ่นแผนที่ที่ขอบบนและขอบขวา ตัวควบคุมแผนที่และข้อความทางกฎหมายที่มองเห็นได้จะปรากฏตามขอบของเขตพื้นที่รอง แสดงเป็นสีเขียว ขณะที่แผนที่แสดงจนเต็มพื้นที่คอนเทนเนอร์ แสดงเป็นสีน้ำเงิน ในตัวอย่างนี้ คุณสามารถทำให้เมนูลอยอยู่ทางด้านขวาของแผนที่โดยไม่บดบังการควบคุมแผนที่

หากต้องการเพิ่มระยะห่างจากขอบในแผนที่ ให้สร้างออบเจ็กต์ UIEdgeInsets แล้วส่งไปยัง GMSMapViewพร็อพเพอร์ตี้ padding

// Insets are specified in this order: top, left, bottom, right
let mapInsets = UIEdgeInsets(top: 100.0, left: 0.0, bottom: 0.0, right: 300.0)
mapView.padding = mapInsets
      

// Insets are specified in this order: top, left, bottom, right
UIEdgeInsets mapInsets = UIEdgeInsetsMake(100.0, 0.0, 0.0, 300.0);
mapView.padding = mapInsets;
      

รูปแบบสีของแผนที่

สำหรับแผนที่ประเภทปกติและภูมิประเทศ คุณสามารถตั้งค่ารูปแบบสีแผนที่เป็นมืด สว่าง หรือใช้การตั้งค่าระบบปัจจุบัน เช่น คุณสามารถปรับรูปแบบสีแผนที่ให้มืดลงหรือสว่างขึ้นโดยอิงตามช่วงเวลาของวัน หรือการใช้อุปกรณ์ในอาคารหรือกลางแจ้ง

ใช้ GMSMapView overrideUserInterfaceStyle: เพื่อตั้งค่าและอัปเดตรูปแบบสีแผนที่

let options = GMSMapViewOptions()
// Map is init to use light mode by default.
let mapView = GMSMapView(options: options)
// Set map to use dark mode.
mapView.overrideUserInterfaceStyle = .dark
// Set map to use light mode.
mapView.overrideUserInterfaceStyle = .light
// Set map to use dark/light mode based on the value of traitCollection.userInterfaceStyle
mapView.overrideUserInterfaceStyle = .unspecified

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
// Map is init to always use light mode.
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
// Set map to use dark mode.
mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
// Set map to use light mode.
mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
// Set map to use dark/light mode based on the value of traitCollection.userInterfaceStyle
mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;