آموزش استفاده از نقشه در فلاتر
در خیلی از اپلیکیشن ها نیاز هست که ما صفحه ای متشکل از یک نقشه داشته باشیم.
نقشه در موارد گوناگونی استفاده میشه, در اپلیکیشن های فروشگاهی برای گرفتن آدرس کاربر, در اپلیکیشن های دایرکتوری برای نمایش محل شرکت یا رستوران, همچنین در برنامه های حمل و نقل و….
برای استفاده از نقشه به دلیل غیر رایگان شدن گوگل پلی از جایگزین آن یعنی MapBox استفاده میکنیم.
سرویس های نقشه ایرانی تا به این لحظه هنوز کتابخونه یا SDK ایی برای فلاتر Flutter عرضه نکرده اند.
آموزش ویدیویی کار با نقشه نیز در فصل دوم آموزش برنامه نویسی فلاتر قرار داره و میتونید استفاده کنید.
برای شروع من از پکیج Flutter_map استفاده میکنم, برای کار با این کتابخونه خط زیر را به فایل pubspec اضافه کنید تا پکیج مورد نظر به پروژه اضافه شود.
0.5.4 flutter_map:
حالا برای آنکه بتونیم نقشه و در صفحه نمایش بدیم از ویجت FlutterMap استفاده میکنیم. این ویجت مختصات طول و عرض جغرافیایی محلی که میخواهید آن را نمایش دهید را دریافت میکند.
Widget build(BuildContext context) {
return new FlutterMap(
options: new MapOptions(
center: new LatLng(51.5, -0.09),
zoom: 13.0,
)
اما برای اینکه بتونید یک نقشه داشته باشید کدهای بالا کافی نیست.
در ادامه وارد وب سایت Mapbox.com شوید و با ساختن اکانت یک توکن دریافت کنید.
return new FlutterMap(
options: new MapOptions(
center: new LatLng(51.5, -0.09),
zoom: 13.0,
),
layers: [
new TileLayerOptions(
urlTemplate: "https://api.tiles.mapbox.com/v4/"
"{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
additionalOptions: {
'accessToken': '<put_access_token_here>',
'id': 'mapbox.streets',
},
)
)
توکن خودتون را در کد بالا قرار دهید و برنامه را اجرا کنید.
در قسمت LatLng(51.5, -0.09) آدرس محل نمایش خودتون و قرار بدید.
اگر میخواهید که یک مارکر داخل نقشه خود قرار دهید به صورت زیر عمل کنید.
return new FlutterMap(
options: new MapOptions(
center: new LatLng(51.5, -0.09),
zoom: 13.0,
),
layers: [
new TileLayerOptions(
urlTemplate: "https://api.tiles.mapbox.com/v4/"
"{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
additionalOptions: {
'accessToken': '<put_access_token_here>',
'id': 'mapbox.streets',
},
),
new MarkerLayerOptions(
markers: [
new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(51.5, -0.09),
builder: (ctx) =>
new Container(
child: new FlutterLogo(),
),
),
],
),
],
);
}
اگر مخواهید که بین دو نقطه یا بیشتر در نقشه یک مسیریابی داشته باشید باید نقاط خودتون و داخل یک لیست تعریف کنید.
var points = <latlng>[
LatLng(51.5, -0.09),
LatLng(53.3498, -6.2603),
LatLng(48.8566, 2.3522),
];
return Scaffold(
appBar: AppBar(title: Text('Polylines')),
drawer: buildDrawer(context, PolylinePage.route),
body: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
children: [
Padding(
padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
child: Text('Polylines'),
),
Flexible(
child: FlutterMap(
options: MapOptions(
center: LatLng(51.5, -0.09),
zoom: 5.0,
),
layers: [
TileLayerOptions(
urlTemplate:
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c']),
PolylineLayerOptions(
polylines: [
Polyline(
points: points,
strokeWidth: 4.0,
color: Colors.purple),
],
)
],
),
),
],
),
),
);
اگر دسترسی به کارت اعتباری دارید میتوانید از نقشه گوگل مپ به راحتی استفاده کنید. روند کار با نقشه ها تقریبا مشابه با یکدیگر هستند.
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی دیتابیس ObjectBox در فلاتر
آموزش اتصال اپلیکیشن فلاتر به پرینتر بلوتوثی
آموزش پیاده سازی معماری MVVM در فلاتر
روش های افزایش امنیت اپلیکیشن در فلاتر
آموزش کار با پکیج Freezed در فلاتر
آموزش ویجت SafeArea در فلاتر
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
در حال حاضر سرویس نقشه مپ هم Flutter SDK خودشو ارائه کرده.
https://support.map.ir/developers/flutter/
سلام
ممنون از تیم مپ موفق باشید
سلام
مممنون از شما اما من وقتی کد center:LatLng میگه latlng تعریف نشده
سلام دوست عزیز برای رفع مشکل از این دستور برای import کردن کتابخانه استفاده کن
import “package:latlong/latlong.dart” as latLng;