آموزش استفاده از نقشه در فلاتر

در خیلی از اپلیکیشن ها نیاز هست که ما صفحه ای متشکل از یک نقشه داشته باشیم.

نقشه در موارد گوناگونی استفاده میشه, در اپلیکیشن های فروشگاهی برای گرفتن آدرس کاربر, در اپلیکیشن های دایرکتوری برای نمایش محل شرکت یا رستوران, همچنین در برنامه های حمل و نقل و….

اگر با فریمورک Flutter آشنایی ندارید میتوانید مقاله فلاتر چیست را مطالعه کنید.

چرا به نقشه در اپلیکیشن نیاز داریم؟

نمایش نقشه در اپلیکیشن‌ها کاربردهای متعددی دارد و به عنوان یکی از ابزارهای محبوب و کارآمد در طراحی برنامه‌ها مورد استفاده قرار می‌گیرد. در زیر تعدادی از کاربردهای اصلی نمایش نقشه در اپلیکیشن‌ها آورده شده است:

1. نقشه‌های مکان‌یابی و مسیریابی: این کاربرد متداول‌ترین کاربرد نمایش نقشه در اپلیکیشن‌ها است.
   اپلیکیشن‌های نقشه مکان‌یابی می‌توانند به کاربران کمک کنند تا به سرعت مکان‌های مورد نیاز خود را پیدا کنند، اطلاعات مرتبط با مکان‌ها (مثلاً نام فروشگاه‌ها، رستوران‌ها، بنزین‌خانه‌ها و غیره) را مشاهده کنند، و نیز بهترین مسیر برای رسیدن به مقصد مورد نظر را انتخاب کنند.
   
2. نقشه‌های تحلیلی و اطلاعات جغرافیایی: نمایش نقشه‌ها به عنوان یک ابزار تحلیلی، به شرکت‌ها و سازمان‌ها کمک می‌کند تا اطلاعات جغرافیایی خود را به صورت مؤثر به نمایش بگذارند.
   از این نقشه‌ها می‌توان در حوزه‌های مختلف مانند برنامه‌ریزی شهری، کشاورزی، محیط زیست و حتی آمارها و داده‌های جمعیتی استفاده کرد.
   
3. نقشه‌های مرتبط با رویدادها و فعالیت‌ها: در برخی اپلیکیشن‌ها، نقشه‌ها به نمایش رویدادها، جاذبه‌های گردشگری، مکان‌های مهم و فعالیت‌های مرتبط با کاربران کمک می‌کنند.
   این نقشه‌ها می‌توانند به کاربران نشان دهند که در نزدیکی چه چیزهای جالبی برای دیدن و تجربه‌کردن وجود دارد.
   
4. نقشه‌های اجتماعی و به اشتراک‌گذاری مکان‌ها: برخی از اپلیکیشن‌ها به کاربران اجازه می‌دهند تا مکان‌های مورد علاقه‌شان را با دیگران به اشتراک بگذارند.
   به عنوان مثال، اپلیکیشن‌های رستوران‌یاب، جایگاه‌های شارژ باتری، پوکه‌مان و… مکان‌های مورد علاقه کاربران را به اشتراک می‌گذارند و اجازه می‌دهند دیگران هم از این اطلاعات استفاده کنند.
   
5. بازی‌ها و واقعیت افزوده: برخی از بازی‌ها و برنامه‌های واقعیت افزوده از نقشه‌ها برای نمایش جهان واقعی به کاربران استفاده می‌کنند. این نقشه‌ها به کاربر اجازه می‌دهند با استفاده از GPS و سایر اطلاعات مکانی، تجربه‌های تعاملی و زنده‌ای را ایجاد کنند.
   

این فهرست تنها چند نمونه از کاربردهای نمایش نقشه در اپلیکیشن‌هاست و در واقع امکانات و کاربردهای متنوع‌تری نیز وجود دارد که به توانایی‌های مختلف نقشه‌ها و اطلاعات جغرافیایی بستگی دارد.

پیاده سازی نقشه در فلاتر

برای استفاده از نقشه به دلیل غیر رایگان شدن گوگل پلی از جایگزین آن یعنی 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) آدرس محل نمایش خودتون و قرار بدید.

آموزش ارسال SMS در فلاتر

اگر میخواهید که یک مارکر داخل نقشه خود قرار دهید به صورت زیر عمل کنید.

   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) =&gt;
              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),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  

اگر دسترسی به کارت اعتباری دارید میتوانید از نقشه گوگل مپ به راحتی استفاده کنید. روند کار با نقشه ها تقریبا مشابه با یکدیگر هستند.