ภาพรวมนี้จะอธิบายวิธีกำหนดค่าแผนที่ที่เพิ่มลงในแอป iOS โดยใช้ Maps SDK สำหรับ iOS
ภาพรวม
หลังจากเพิ่มแผนที่ลงในแอปแล้ว คุณจะกำหนดค่าตัวเลือกเริ่มต้นและการตั้งค่ารันไทม์ของแผนที่ได้ ดูรายละเอียดเกี่ยวกับการเพิ่มคอนเทนเนอร์แผนที่ได้ที่เพิ่มแผนที่
การตั้งค่าแผนที่เบื้องต้นมีดังนี้
- ตำแหน่งของกล้อง ซึ่งรวมถึงตำแหน่ง การซูม การเอียง และการเอียง ดูรายละเอียดเกี่ยวกับการวางตำแหน่งกล้องใน กล้องและมุมมอง
- สีพื้นหลังของแผนที่
- ประเภทแผนที่
- คอมโพเนนต์ UI ที่จะแสดง เช่น ปุ่มซูมและเข็มทิศ
- ท่าทางสัมผัสเพื่อเปิดใช้
ขณะรันไทม์ คุณจะกำหนดการตั้งค่าเหล่านี้และการตั้งค่าการเพิ่มบางรายการได้โดยการอัปเดตออบเจ็กต์ GMSMapView
ตัวเลือกแผนที่
เมื่อเริ่มต้นมุมมองแผนที่ ตัวเลือกการกำหนดค่าจะตั้งค่าเป็น GMSMapViewOptions
พร็อพเพอร์ตี้ตัวเลือกประกอบด้วย frame
, camera
, mapID
หรือ backgroundColor
ตัวเลือกแผนที่ | |
---|---|
สร้างเฟรม | ค่า:
CGRect เฟรมแผนที่ ค่าเริ่มต้นคือ CGRectZero
|
กล้อง | ค่า:
GMSCameraPosition ตำแหน่งกล้องแผนที่เริ่มต้น
|
mapID | ค่า:
GMSMapID รหัสแผนที่ของ Google พารามิเตอร์ที่ไม่บังคับ
|
backgroundColor | ค่า:
UIColor ค่าเริ่มต้นคือ UIColor.lightGray
|
กำหนดค่าตัวเลือกแผนที่
คุณจะตั้งค่าพร็อพเพอร์ตี้ตัวเลือกของคุณเอง หรือส่ง GMSMapViewOptions
ที่สร้างขึ้นด้วยค่าเริ่มต้นไปยัง GMSMapView
โดยตรงก็ได้
Swift
let options = GMSMapViewOptions() options.camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 6) let mapView = GMSMapView(options:options)
Objective-C
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init]; options.camera = [GMSCameraPosition cameraWithLatitude:-33.8683 longitude:151.2086 zoom:6]; GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
ต่อไปนี้คือตัวอย่างการส่งออบเจ็กต์ GMSMapViewOptions
ที่มีค่าเริ่มต้นไปยัง GMSMapView
โดยตรง
Swift
let options = GMSMapViewOptions() let mapView = GMSMapView(options:options) //initialized with default values
Objective-C
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init]; GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options]; //initialized with default values
กำหนดค่าสีพื้นหลัง
เมื่อทำงานในโหมดมืดหรือสลับระหว่างมุมมองแผนที่ การลบล้างสีพื้นหลังเริ่มต้นของแผนที่อาจมีประโยชน์ ซึ่งทำได้ด้วยการตั้งค่าพร็อพเพอร์ตี้ backgroundColor
ตัวเลือกแผนที่
Swift
let options = GMSMapViewOptions() options.backgroundColor = UIColor.yellowColor let mapView = GMSMapView(options:options)
Objective-C
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init]; options.backgroundColor = UIColor.yellowColor; GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
ประเภทแผนที่
คุณสามารถปรับแต่งแผนที่ของคุณด้วยแผนที่ประเภทต่างๆ ประเภทของแผนที่จะกำกับ การแสดงแผนที่โดยรวม ตัวอย่างเช่น แผนที่การเมืองซึ่งเน้นไปที่การแสดงขอบเขต และแผนที่ถนนที่แสดงถนนทั้งหมดของเมืองหรือภูมิภาค Maps SDK สำหรับ iOS มีแผนที่ ประเภทต่อไปนี้
ประเภทแผนที่ | |
---|---|
ปกติ | ค่า:
kGMSTypeNormal แผนที่ถนนทั่วไป แสดงถนน สถานที่บางส่วนที่มนุษย์สร้างขึ้น และสถานที่ทางธรรมชาติที่สำคัญ เช่น แม่น้ำ นอกจากนี้ คุณยังดูป้ายกำกับถนนและฟีเจอร์ได้ด้วย รองรับการตั้งค่ารูปแบบสีแผนที่เป็นมืด สว่าง หรือตามการตั้งค่าระบบ
|
ไฮบริด | ค่า:
kGMSTypeHybrid ข้อมูลภาพถ่ายจากดาวเทียมที่เพิ่มแผนที่ถนน นอกจากนี้ คุณยังดูป้ายกำกับถนนและฟีเจอร์ได้ด้วย |
ดาวเทียม | ค่า:
kGMSTypeSatellite ข้อมูลภาพถ่ายจากดาวเทียม ป้ายกำกับถนนและฟีเจอร์จะมองไม่เห็น
|
ภูมิประเทศ | ค่า:
kGMSTypeTerrain ข้อมูลภูมิประเทศ แผนที่ประกอบด้วยสี เส้นชั้นความสูงและป้ายกำกับ และแรเงามุมมอง นอกจากนี้ยังมองเห็นถนนและป้ายกำกับบางป้ายด้วย รองรับการตั้งค่ารูปแบบสีแผนที่เป็นมืด สว่าง หรือตามการตั้งค่าระบบ
|
ไม่มี | ค่า:
kGMSTypeNone ไม่มีชิ้นส่วนแผนที่ จะไม่แสดงผลชิ้นส่วนแผนที่ฐาน โหมดนี้มีประโยชน์เมื่อใช้ร่วมกับเลเยอร์ของชิ้นส่วนแผนที่ การแสดงข้อมูลการจราจรถูกปิดใช้งานเมื่อตั้งค่าประเภทแผนที่เป็นไม่มี |
การเปลี่ยนประเภทแผนที่
หากต้องการตั้งค่าประเภทของแผนที่ ให้กำหนดค่าใหม่ให้กับพร็อพเพอร์ตี้ GMSMapView.mapType
ตัวอย่างเช่น หากต้องการแสดงประเภทแผนที่ดาวเทียม ให้ทำดังนี้
Swift
let options = GMSMapViewOptions() options.camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 6) let mapView = GMSMapView(options:options) mapView.mapType = .satellite
Objective-C
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
Swift
mapView.isIndoorEnabled = false
Objective-C
mapView.indoorEnabled = NO;
อีกวิธีหนึ่งคือ คุณสามารถปิดใช้งานเพียง ตัวควบคุมเครื่องมือเลือกชั้น
การเพิ่มแปลนอาคาร
แปลนอาคารมีให้บริการในบางพื้นที่ หากไม่มีข้อมูลแปลนอาคารสำหรับอาคารที่คุณต้องการไฮไลต์ในแอปพลิเคชัน คุณสามารถดำเนินการต่อไปนี้
- เพิ่มแผนผังชั้น ลงใน Google Maps โดยตรง ซึ่งจะทำให้แผนของคุณพร้อมใช้งานสำหรับผู้ใช้ Google Maps ทุกคน
- แสดงแผนผังชั้นเป็นการวางซ้อนภาคพื้นดิน ซึ่งจะทำให้เฉพาะผู้ใช้แอปพลิเคชันของคุณดูแปลนอาคารได้
เลเยอร์การจราจร
คุณสามารถทำให้ผู้ใช้ของคุณสามารถดูแผนที่โดยมีข้อมูลความหนาแน่นของการจราจรซ้อนทับอยู่ด้านบนได้ ข้อมูลนี้จะแสดงให้เห็นข้อมูลสรุปภาพ
เกี่ยวกับสถานการณ์การจราจรในท้องถิ่น คุณเปิดและปิดเลเยอร์การเข้าชมได้โดยเรียกใช้เมธอด trafficEnabled
ตัวอย่างต่อไปนี้แสดงลักษณะที่เลเยอร์การจราจรอาจปรากฏในแผนที่
การช่วยเหลือพิเศษ
โดยค่าเริ่มต้น ระบบจะซ่อนองค์ประกอบการช่วยเหลือพิเศษบนแผนที่ คุณเปิดใช้การช่วยเหลือพิเศษได้โดยตั้งค่าพร็อพเพอร์ตี้ accessibilityElementsHidden
ของ GMSMapView
เป็น NO
ซึ่งทําให้มีการสร้างองค์ประกอบการช่วยเหลือพิเศษสําหรับออบเจ็กต์ซ้อนทับ (เช่น GMSMarker
และหน้าต่างข้อมูล GMSPolyline
เป็นต้น)
Swift
mapView.accessibilityElementsHidden = false
Objective-C
mapView.accessibilityElementsHidden = NO;
พร็อพเพอร์ตี้นี้เป็นไปตามโปรโตคอล UIAccessibility
แบบไม่เป็นทางการ ยกเว้นค่าเริ่มต้นใน Maps SDK สำหรับ iOS คือ YES
ตำแหน่งของฉัน
โดยค่าเริ่มต้น จะไม่มีการแสดงข้อมูลตำแหน่งบนแผนที่ คุณสามารถเปิดใช้จุด "ตำแหน่งของฉัน" สีน้ำเงินและทิศทางเข็มทิศโดยตั้งค่า myLocationEnabled
เป็นเปิด GMSMapView
Swift
mapView.isMyLocationEnabled = true
Objective-C
mapView.myLocationEnabled = YES;
การเปิดใช้ฟีเจอร์นี้จะระบุตำแหน่งปัจจุบันของผู้ใช้ผ่านพร็อพเพอร์ตี้ myLocation
พร็อพเพอร์ตี้นี้อาจไม่พร้อมใช้งานทันที เช่น หากผู้ใช้ได้รับแจ้งจาก iOS ให้อนุญาตการเข้าถึงข้อมูลนี้ ในกรณีนี้คือ
nil
Swift
print("User's location: \(String(describing: mapView.myLocation))")
Objective-C
NSLog(@"User's location: %@", mapView.myLocation);
สิ่งปลูกสร้าง 3 มิติ
เมื่อดูในระยะใกล้ หลายๆ เมืองจะมีสิ่งปลูกสร้าง 3 มิติซึ่งมองเห็นได้จากภาพของเมืองซีแอตเทิล รัฐวอชิงตัน ด้านล่าง
คุณปิดใช้สิ่งปลูกสร้าง 3 มิติได้โดยการตั้งค่าพร็อพเพอร์ตี้ GMSMapView
ที่เกี่ยวข้องใน Swift หรือ Objective-C ดังที่แสดงด้านล่าง
Swift
mapView.isBuildingsEnabled = false
Objective-C
[mapView setBuildingsEnabled:NO];
ระยะห่างจากขอบของแผนที่
Google Maps ได้รับการออกแบบมาเพื่อครอบคลุมทั้งภูมิภาคตามที่กำหนดโดย GMSMapView
แง่มุมต่างๆ ของลักษณะและการทำงานของแผนที่จะกำหนดโดยมิติข้อมูลของมุมมอง ดังนี้
- เป้าหมายของกล้องแสดงถึงกึ่งกลางของบริเวณเบาะ
- ตัวควบคุมแผนที่ถูกวางตำแหน่งโดยสัมพันธ์กับขอบของแผนที่
- ข้อมูลทางกฎหมาย เช่น ข้อความลิขสิทธิ์ หรือโลโก้ Google จะปรากฏ ที่ขอบด้านล่างของแผนที่
คุณเพิ่มระยะห่างจากขอบรอบขอบแผนที่ได้โดยใช้ GMSMapView
padding
แผนที่จะแสดงเต็มพื้นที่ของคอนเทนเนอร์ไปเรื่อยๆ แต่ข้อความและการควบคุมตำแหน่ง ท่าทางสัมผัสบนแผนที่ และการเคลื่อนไหวของกล้องจะทำงานเสมือนว่าถูกวางไว้ในพื้นที่ที่เล็กกว่า ซึ่งจะส่งผลให้เกิดการเปลี่ยนแปลงต่อไปนี้
- การเคลื่อนที่ของกล้องที่ใช้การเรียก API หรือการกดปุ่ม (เช่น เข็มทิศ ตำแหน่งของฉัน) จะสัมพันธ์กับบริเวณที่มีระยะห่างจากกัน
GMSMapView
.projection
แสดงผลการคาดการณ์ที่รวมเฉพาะภูมิภาคที่มีส่วนแทรกเข้ามา- ตัวควบคุม UI จะหักลบจากขอบของคอนเทนเนอร์ตามจำนวนจุดที่ระบุ
Padding มีประโยชน์เมื่อออกแบบ UI ให้ซ้อนทับบางส่วนของแผนที่ ตัวอย่างเช่น ในภาพจะมีแผ่นแผนที่ที่ขอบบนและขอบขวา ตัวควบคุมแผนที่และข้อความทางกฎหมายที่มองเห็นได้จะปรากฏตามขอบของเขตพื้นที่รอง แสดงเป็นสีเขียว ขณะที่แผนที่แสดงจนเต็มพื้นที่คอนเทนเนอร์ แสดงเป็นสีน้ำเงิน ในตัวอย่างนี้ คุณสามารถทำให้เมนูลอยอยู่ทางด้านขวาของแผนที่โดยไม่บดบังการควบคุมแผนที่
หากต้องการเพิ่มระยะห่างจากขอบในแผนที่ ให้สร้างออบเจ็กต์ UIEdgeInsets
แล้วส่งไปยัง GMSMapView
พร็อพเพอร์ตี้ padding
Swift
// 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
Objective-C
// 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:
เพื่อตั้งค่าและอัปเดตรูปแบบสีแผนที่
Swift
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
Objective-C
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;