Xarita belgilarini qo'shish
Endi biz xaritamizga marker qo'shmoqchimiz. Markerlar bizga xaritada ma'lum bir joyni ko'rsatishga yordam beradi. Markerlarni o'rnatish uchun biz markerlarni ushlab turadigan holatni ishga tushirishimiz kerak. Keyin, biz onMapCreatedhodisada ishga tushiriladigan funktsiyani yaratmoqchimiz. Xarita yaratilgandan so'ng biz markerlarni ekranga qo'shamiz. Markerlarni qo'shish uchun biz Markera markerIdva positionqiymatni (kenglik va uzunlik) oladigan vidjetga kirishimiz mumkin. Markerlarni ishga tushirish quyidagi kod parchasida keltirilgan:
Set _markers = {}; void _onMapCreated (GoogleMapController controller) { setState(() { _markers.add( Marker( markerId: MarkerId("id-1"), position: LatLng(37.42796133580664, -122.085749655962) ) ); }); }
Endi biz vidjetda markersxususiyatni o'rnatishimiz va quyidagi kod parchasida ko'rsatilganidek , hodisaga funktsiyani GoogleMapbelgilashimiz kerak:_onMapCreatedonMapCreated
body: GoogleMap( mapType: MapType.normal, initialCameraPosition: _initialCameraPosition, onMapCreated: _onMapCreated, markers: _markers, ),
Shunday qilib, biz quyidagi skrinshotda ko'rsatilganidek, xaritada markerni olamiz:
Xarita belgilariga ma'lumot qo'shish
Shuningdek, markerlarimizni o'z ehtiyojlarimiz asosida sozlashimiz mumkin. Unga ma'lumot ham qo'shishimiz mumkin. Xaritadagi markerni bosganimizdan so'ng ma'lumotlar ko'rsatiladi. Marker ma'lumotlarini qo'shish uchun biz vidjetga infoWindowxususiyat qo'shishimiz kerak Marker. Keyin, InfoWindowquyidagi kod parchasida ko'rsatilganidek, markerga qo'shimcha ma'lumot qo'shish uchun vidjetdan foydalanishimiz kerak:
void _onMapCreated (GoogleMapController controller) { setState(() { _markers.add( Marker( markerId: MarkerId("id-1"), position: LatLng(37.42796133580664, -122.085749655962), infoWindow: InfoWindow( title: "GooglePlex" ) ) ); }); }
Endi markerni bosganimizdan so'ng, quyidagi skrinshotda ko'rsatilgandek ma'lumotlarni ko'ramiz:
Faqat bu emas, biz markerga maxsus piktogramma va boshqa elementlarni qo'shishimiz mumkin, bu ham juda oson.
Nihoyat, biz Google Developer Console va google_maps_flutter paketidagi Google Maps SDK API kaliti yordamida Google Xaritalarni Flutter xarita loyihamizga muvaffaqiyatli integratsiya qildik .
Xulosa
Ushbu labaratoriya topshirig’ining asosiy maqsadi Flutter muhitida Google Maps integratsiyasini o'rganishdir. Google Xaritalar - bu Google tomonidan taqdim etilgan kuchli geo-navigatsiya xizmati bo'lib, bugungi kunda deyarli har qanday texnologiyaga qo'shilishi mumkin. Bunday holda, biz Google Maps-ni Flutter loyihamizga integratsiya qilish uchun Android Google Maps SDK-da cheklangan Google API-dan foydalandik.Keyin, mobil ilovaning foydalanuvchi interfeysida haqiqiy xaritani ko'rsatish uchun biz google_maps_flutter bo'lgan eng so'nggi paketdan foydalandik. Konfiguratsiyalar oson va sodda edi. Xarita oddiy GoogleMap vidjet va ba'zi asosiy konfiguratsiyalar yordamida o'rnatildi. Oxir-oqibat, biz xaritaga ba'zi markerlarni qo'shishga muvaffaq bo'ldik. Bu vidjet bilan boshqa ko‘p narsalarni qilish mumkin.
Do'stlaringiz bilan baham: |