আপনি PinStyle অবজেক্ট কনফিগার করে মার্কারগুলির চেহারা কাস্টমাইজ করতে পারেন। PinStyle টাইপটি ব্যাকগ্রাউন্ড এবং বর্ডারের রঙ, গ্লিফ টেক্সট এবং রঙ, উচ্চতা, ব্যবহার করা ছবি এবং অতিরিক্ত কাস্টমাইজেশনের জন্য আরও বিকল্প পরিবর্তন করার বিকল্প প্রদান করে।
নিম্নলিখিত কোড নমুনাটি দেখায় কিভাবে একটি নতুন মার্কার তৈরি করতে হয় এবং উপলব্ধ কিছু কাস্টমাইজেশন বিকল্প ব্যবহার করে এটিকে স্টাইল করতে হয়:
Map(mode: .hybrid) {
Marker(
position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
label: "London",
style: .pin(.init(scale: 2.0))
)
}
এই পৃষ্ঠাটি আপনাকে নিম্নলিখিত উপায়ে মার্কারগুলি কীভাবে কাস্টমাইজ করবেন তা দেখায়:
মার্কার স্কেল করুন
একটি মার্কার স্কেল করতে, scale বিকল্পটি ব্যবহার করুন:
Map(mode: .hybrid) {
Marker(
position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
label: "Tokyo",
style: .pin(
.init(
backgroundColor: .blue,
borderColor: .yellow,
scale: 2.0
) {Text("G").minimumScaleFactor(0.01)}
)
)
}
পটভূমির রঙ পরিবর্তন করুন
মার্কারের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে PinElement.background অপশনটি ব্যবহার করুন:
Map(mode: .hybrid){
Marker(
position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
label: "Paris",
style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
)
}
সীমানার রঙ পরিবর্তন করুন
মার্কারের বর্ডারের রঙ পরিবর্তন করতে markerOptions.borderColor বিকল্পটি ব্যবহার করুন:
Map(mode: .hybrid){
Marker(
position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
label: "Rio de Janeiro",
style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
)
}
একটি গ্লিফে টেক্সট যোগ করুন
ডিফল্ট গ্লিফের পরিবর্তে একটি markerOptions.glyph অক্ষর ব্যবহার করুন। মার্কারের টেক্সট গ্লিফ মার্কার দিয়ে স্কেল করে:
Map(mode: .hybrid){
Marker(
position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
label: "Dubai",
style: .pin(.init(backgroundColor: .green)) {
Text("D") // Adds text inside the marker glyph
}
)
}