آموزش کار با Google map

آموزش Flutter - قسمت 54
زمان قرارگیری : 19 دی 1397
زمان این قسمت : 38:49
برای دسترسی به این دوره نیاز است بصورت نقدی این دوره را خریداری کنید و این دوره بخشی از دوره های اعضای ویژه نمیباشد

تعداد شرکت کنندگان 840 نفر
قیمت دوره 139000 تومان
وضعیت دوره تکمیل شده
زمان کل دوره 30:03:58
تعداد قسمت‌ها 72
نوع دسترسی نقدی

در این جلسه قصد دارم کار با پکیج google map را برای داشتن یک نقشه خوب به شما آموزش دهم با استفاده از این پکیج به سادگی میتوانیم نقطه دلخواه خود را در نقشه نمایش دهیم، همچنین میتوانیم مارکرهای مختلفی را بر روی نقشه مشخص کنیم .

آموزش کار با Google map

رایگان 11:30
09:07
برای دسترسی به این دوره نیاز است بصورت نقدی این دوره را خریداری کنید و این دوره بخشی از دوره های اعضای ویژه نمیباشد

تعداد شرکت کنندگان 840 نفر
قیمت دوره 139000 تومان
وضعیت دوره تکمیل شده
زمان کل دوره 30:03:58
تعداد قسمت‌ها 72
نوع دسترسی نقدی

آنلاین
user-avatar
مدرس دوره حسام موسوی

اول داستان، طراح گرافیک بودم و ۲ سالی به عنوان طراح مشغول بودم، بعد به برنامه‌نویسی علاقمند شدم و الان بیشتر از ۱۰ ساله که عاشق کدزنی و چالش‌های پروژه‌های مختلفم. به تدریس علاقه خاصی دارم و دوست دارم دانشی که در این راه بدست آوردم را در اختیار دیگران هم قرار بدم. 

سوالات و گفتگو‌ها

سوالات و گفتگو‌ها

اگر سوال و مشکلی یا حتی بحثی در یکی از حوزه‌های برنامه‌نویسی دارید این بخش به شما کمک ویژه‌ای خواهد کرد

دورهای پیشنهادی

مشاهده همه دوره ها
آموزش ایجاد وبسایت PWA یا Progressive Web Apps

آموزش ایجاد وبسایت PWA یا Progressive Web Apps

وب‌اپلیکیشن‌های پیش رونده (Progressive Web Apps) یا به اختصار PWA می‌توانند تحول بزرگ بعدی در حوزه‌ی اپلیکیشن‌های موبایل محسوب شوند. این فناوری که ابت...

آموزش دیزاین پترن ها

آموزش دیزاین پترن ها

در برنامه‌نویسی شی گرا معمولا یک سری مسئله خیلی ساده و شناخته شده‌ای داریم که بسیار پر رخداد و تکراری هستند. برای حل این مسائل هرکسی احتمالا یک راه‌حل...

دسترسی رایگان برای اعضای ویژه
مدیریت پروژه های متن‌باز با git و github

مدیریت پروژه های متن‌باز با git و github

اگر از دنبال کنندگان مجله آموزشی راکت باشید میدانید که در راکت دوره های زیادی از ابزارهای اوپن سورس مثل لاراول ، فریمورک های جاوا اسکریپت ، نود جی اس...

دسترسی رایگان برای اعضای ویژه
آموزش گیت و گیت هاب

آموزش گیت و گیت هاب

گیت و گیت هاب چی هستن ؟ دقیقا در این دوره هر دوی اینها رو یاد میگیرید و میفهمید که این دو ، چه معجزه عالی در دنیای برنامه نویسین. شاید خیلی از شماهای...

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
آفلاین
user-avatar
رایان شکرآبی
3 ماه پیش

سلام آقای موسوی google map خیلی تغییر کرده من برای این که markero بیارم رو نقشه واقعا 3 4 ساعت پاش بودم.فقط الان نمیدونم چطوری باید این markero بزارم توی floatingactionbuttom کل کدمم درست اجرا میشه فقط مشکل اینه که میخوام marker با floatingactionbuttom بیاد اینم کدمه:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MapScreenState();
}

class MapScreenState extends State<MapScreen>{

  GoogleMapController mapController;
  CameraPosition _position = new CameraPosition(target: LatLng(32.5256359,54.8083375),zoom: 4);
  MapType _currentMapTyped = MapType.normal;

  void _onMapCreated(GoogleMapController controller){
    mapController = controller ;
  }

  Future <void> _onMapTypeButtonPressed()async{
    if(_currentMapTyped == MapType.normal){
      setState(() {
        _currentMapTyped = MapType.satellite;
      });
    }else{
      setState(() {
        _currentMapTyped = MapType.normal ;
      });
    }

  }

   List <Marker>Markers = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Markers.add(Marker(
        markerId: MarkerId('myMarker'),
        draggable: true,
        infoWindow:InfoWindow(title: 'tehran',snippet: 'this is city of tehran',),
        onTap: (){
          print('marker tapped');
        },
        position: LatLng(35.6892,51.3890)

    )
    );
  }

  @override
  Widget build(BuildContext context) {
  return new Scaffold(
    body: new Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        new GoogleMap(
            initialCameraPosition:_position,
            onMapCreated: _onMapCreated,
            myLocationButtonEnabled: true,
            myLocationEnabled: true,
            markers:Set.from(Markers),
          mapType:_currentMapTyped ,
           // mapType:MapType.satellite ,
        ),
        new Padding(
            padding: const EdgeInsets.only(bottom: 20 , left: 16),
            child: new Align(
              alignment: Alignment.bottomLeft,
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new FloatingActionButton(
                      onPressed:_onMapTypeButtonPressed,
                      backgroundColor: Colors.green,
                      child: const Icon(Icons.map,size:36 ,color: Colors.white,),
                    ),
                  new SizedBox(
                    height: 16,
                  ),
                  new FloatingActionButton(
                    onPressed:(){},
                    backgroundColor: Colors.green,
                    child: const Icon(Icons.add_location,size:36 ,color: Colors.white,),
                  ),
                ],
              ),

            ),

        )

      ],
    ),

  );
  }
}
آنلاین
user-avatar
حسام موسوی
3 ماه پیش

منظورتون از اینکه بزارم توی floatingactionbuttom چیه منظور اینکه با زدن روی floatingactionbuttom مارکر رو در نقشه اضافه کنید ؟

آفلاین
user-avatar
رایان شکرآبی
3 ماه پیش

بله میخوام با کلیک کردن رو floating اجرا بشه.الان بطور پیشفرض روی نقشه هست و کار میکنه

آفلاین
user-avatar
رایان شکرآبی
3 ماه پیش

بله میخوام با زدن دکمه floating مارکر اضافه بشه و این که اصلا دکمه my location به هیچ صورت اجرا نمیشه نمیدونم چرا راه های مختلفیو امتحان کردم.
ممنونم

آنلاین
user-avatar
حسام موسوی
3 ماه پیش

الان متوجه نشدم دقیقا کجاشو مشکل دارید خوب اون قسمت اضافه کردن مارکر رو قرار میدید داخل onPressed مربوط به FloatingActionButton !

آفلاین
user-avatar
رایان شکرآبی
3 ماه پیش

این کارو انجام دادم ولی باز هچی تغیر نمیکند برنامه run میشه ولی مارکر اضافه نمیشه اینم کدمه

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MapScreenState();
}

class MapScreenState extends State<MapScreen>{

  GoogleMapController mapController;
  CameraPosition _position = new CameraPosition(target: LatLng(32.5256359,54.8083375),zoom: 4);
  MapType _currentMapTyped = MapType.normal;
  LatLng thispos = new LatLng(32.5256359,54.8083375);
  void _onMapCreated(GoogleMapController controller){
    mapController = controller ;
  }

  Future <void> _onMapTypeButtonPressed()async{
    if(_currentMapTyped == MapType.normal){
      setState(() {
        _currentMapTyped = MapType.satellite;
      });
    }else{
      setState(() {
        _currentMapTyped = MapType.normal ;
      });
    }

  }

   List <Marker>Markers = [];

  @override
  Widget build(BuildContext context) {
  return new Scaffold(
    body: new Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        new GoogleMap(
            initialCameraPosition:_position,
            onMapCreated: _onMapCreated,
            myLocationButtonEnabled: true,
            myLocationEnabled: true,
            markers:Set.from(Markers),

            mapType:_currentMapTyped ,
           // mapType:MapType.satellite ,
        ),
        new Padding(
            padding: const EdgeInsets.only(bottom: 20 , left: 16),
            child: new Align(
              alignment: Alignment.bottomLeft,
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new FloatingActionButton(
                      onPressed:_onMapTypeButtonPressed,
                      backgroundColor: Colors.green,
                      child: const Icon(Icons.map,size:36 ,color: Colors.white,),
                    ),
                  new SizedBox(
                    height: 16,
                  ),
                  new FloatingActionButton(
                    onPressed:(){
                      mapController.isMarkerInfoWindowShown(addlocat());
                    },
                    backgroundColor: Colors.green,
                    child: const Icon(Icons.add_location,size:36 ,color: Colors.white,),
                  ),
                ],
              ),

            ),

        )

      ],
    ),

  );
  }
  MarkerId addlocat(){
    setState(() {
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        Markers.add(Marker(
            markerId: MarkerId('myMarker'),
            draggable: true,
            infoWindow:InfoWindow(title: 'tehran',snippet: 'this is city of tehran',),
            visible: true,
            icon:BitmapDescriptor.defaultMarker,
            onTap: addlocat,
            position: LatLng(35.6892,51.3890)
        )
        );
      }
    });
  }
}
آنلاین
user-avatar
حسام موسوی
3 ماه پیش

الان شما مگه با این کد مارکر ثبت نکردید؟

onPressed:(){
    setState(() {
        Markers.add(Marker(
            markerId: MarkerId('myMarker'),
            draggable: true,
            infoWindow:InfoWindow(title: 'tehran',snippet: 'this is city of tehran',),
            visible: true,
            icon:BitmapDescriptor.defaultMarker,
            onTap: addlocat,
            position: LatLng(35.6892,51.3890)
        )
        );
    })
}

اگر اره خوب همینو قرار بدید در متد مورد نظر دیگه

آفلاین
user-avatar
saeed sadighi
5 ماه پیش

سلام اگه بخوایم فاصله بین دوتا مارکر بدست بیاریم و نقشه بره بین اونها مثل اسنپ باید چیکار کنیم

آنلاین
user-avatar
حسام موسوی
5 ماه پیش

در مستندات پکیج مورد نظر هست با مثال

آفلاین
user-avatar
saeed sadighi
5 ماه پیش

سلام ایا map فقط برای نمایش هم پولی هست

آنلاین
user-avatar
حسام موسوی
5 ماه پیش

اطلاع ندارم در این مورد ولی map های ایرانی و خوب زیادی وجود داره

آفلاین
user-avatar
saeed sadighi
5 ماه پیش

میشه چند تا مثال بگید ؟

آنلاین
user-avatar
حسام موسوی
5 ماه پیش

map.ir

آفلاین
user-avatar
علیرضا اکاتی
1 سال پیش

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

آنلاین
user-avatar
حسام موسوی
1 سال پیش

سلام در خود ویدیو هم توضیح دادیم که در حال تغییره اما این تغییرات کاملا از طریق صفحه خودش و چیزهای که در ویدیو گفتیم قابل درکه

آفلاین
user-avatar
علیرضا اکاتی
1 سال پیش

من تا قدم های آخر پیش رفتم ، اما مکان مارکر رو بعد از تغییر نتونستم بدست بیارم . کدهامو قرار میدم برای استفاده بقیه دوستان و همینطور اگه مرحله ی آخر رو رد کردید ;) همینجا بزارید .

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  State<MapScreen> createState() => MapScreenState();
}

class MapScreenState extends State<MapScreen> {

  GoogleMapController mapController;
  MapType _currentMapType=MapType.normal;
  Marker marker=new Marker(
      draggable: true,
      markerId: MarkerId("1"),
      position: LatLng(36.314, 52.93),
      icon: BitmapDescriptor.defaultMarker,
      infoWindow: const InfoWindow(
        title: 'Map Marker',
      ),
  );

  static const _position  = CameraPosition(
    target: LatLng(36.314, 52.93),

  );

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        alignment: Alignment.bottomCenter,
        children: <Widget>[
          new GoogleMap(

            initialCameraPosition: _position ,
            onMapCreated: _onMapCreated,
            myLocationEnabled: true,
            mapType: _currentMapType,
            markers:Set<Marker>.of(
              <Marker>[
                marker
              ],
            ),
          ),
          new Padding(
              padding: const EdgeInsets.only(bottom: 20 , left: 16),
              child: new Align(
                alignment: Alignment.bottomLeft,
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    new FloatingActionButton(
                        onPressed: _mapTypeChanged,
                      backgroundColor: Colors.green,
                      child: const Icon(Icons.map , size: 36,color: Colors.white,),

                    ),
                    new SizedBox(
                      height: 16,
                    ),
                    new FloatingActionButton(
                      onPressed: _onAddMarker,
                      backgroundColor: Colors.green,
                      child: const Icon(Icons.add_location , size: 36,color: Colors.white,),

                    ),
                  ],
                ),
              ),
          ),
          new RaisedButton(
              onPressed: (){
                mapController.animateCamera(CameraUpdate.newCameraPosition(
                  const CameraPosition(
                    target: LatLng(36.314, 52.93),
                    zoom: 5,
                  )
                ));
              },
            child: new Text('Go To Iran'),
          )
        ],
      )
    );
  }

  void _onMapCreated(GoogleMapController controller) {
    mapController=controller;
  }

  void _mapTypeChanged() {
    if(_currentMapType==MapType.normal){
      setState(() {
        _currentMapType=MapType.satellite;
      });
    }else{
      setState(() {
        _currentMapType=MapType.normal;
      });
    }
  }

  void _onAddMarker() {
    print(this.marker.toString());
  }
} 
آفلاین
user-avatar
الیاس بشکنی
1 سال پیش

سلام
ببخشید هیچکدوم از آموزش های شما مثل addMarker و... کار نمیکنه دیگه
توی صفحه خودشون هم نوشتن :

See the example directory for a complete sample app.

ولی خب جایی چیزی ندیدم من.
میشه یه آموزشی چیزی معرفی کنین؟
چون واقعا به آموزش کار با نقشه نیاز دارم!

آنلاین
user-avatar
حسام موسوی
1 سال پیش

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

آنلاین
user-avatar
حسام موسوی
1 سال پیش

ببینید زمانی که از یک پکیج استفاده میکنید خودش در اکثر مواقع باید درخواست Permission کنه . در مورد اوردن دکمه لوکیشن هم یک سری توضیحات بود در یکی دو جلسه جلوتر هم توضیح دادم ابتدا کامل ببینید
و اینکه خیلی از ویژگی ها بستگی به پکیجی داره که ازش استفاده می کنید

آفلاین
user-avatar
الیاس بشکنی
1 سال پیش

سلام
من وقتی myLoactionEnabled رو true میکنم دکمش نمیاد
باید برم به صورت دستی توی تنظیمات برنامه دسترسی لوکیشن رو فعال کنم
میشه در مورد RunTime Permission ها توضیحی بدین؟
چون با آموزش
https://medium.com/@sadabwasim/flutter-runtime-permission-d82461ff926c
خواستم پیش برم ولی وقتی کتابخانه رو ایمپورت میکنم نمیشناسه
یعنی کتابخانه های دیگه هم همینجوریه؟ (کتابخانه هایی که خود فلاتر توسعه داده اوکیه)

آفلاین
user-avatar
داود
1 سال پیش

سلام.
من وقتی آخرین ورژن گوگل مپ رو اضافه میکنم بعد از دستور زیر
flutter clean
ارورهای زیر رو میگیرم و نمیتونم حلشون کنم گاهی هم خودبخود حل میشود.
شما میتونید راهنمایی کنید ؟ ممنون
WARNING: This version of google_maps_flutter will break your Android build if it or its dependencies aren't compatible with AndroidX.
See https://goo.gl/CP92wY for more information on the problem and how to fix it.
This warning prints for all Android build failures. The real root cause of the error may be unrelated.

آنلاین
user-avatar
حسام موسوی
1 سال پیش

سلام چرا دستور flutter clean که چی بشه

آفلاین
user-avatar
داود
1 سال پیش

برای اینکه بتون بلد بگیرم از آخرین تغییرات
لطفا راهنمایی کنید