如何将标记位置分配给谷歌 Map API on Flutter

Question

I am new to using google API with flutter, I am trying to put the marker automatically to two sets locations (origin and destination) but I've been unable to do it, instead, it only puts the marker on where I tap on the screen, can someone help me out with this, please? here is the code below I am trying to make the origin marker set to (51.4545, -2.587910) and destination (51.500725, -2.548568)

import 'package:flutter/material.dart';
import 'package:maps/directions_model.dart';
import 'package:maps/directions_repository.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  static const _initialCameraPosition = CameraPosition(
    target: LatLng(51.4545, -2.587910),
    zoom: 12.5,
  );

  GoogleMapController _googleMapController;
  Marker _origin;
  Marker _destination;
  Directions _info;

  @override
  void dispose() {
    _googleMapController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        title: const Text('Google Maps'),
        actions: [
          if (_origin != null)
            TextButton(
              onPressed: () => _googleMapController.animateCamera(
                CameraUpdate.newCameraPosition(
                  CameraPosition(
                    target:  LatLng(51.500725, -2.548568),
                    //_origin.position,
                    zoom: 14.5,
                    tilt: 50.0,
                  ),
                ),
              ),
              style: TextButton.styleFrom(
                primary: Colors.green,
                textStyle: const TextStyle(fontWeight: FontWeight.w600),
              ),
              child: const Text('ORIGIN'),
            ),
          if (_destination != null)
            TextButton(
              onPressed: () => _googleMapController.animateCamera(
                CameraUpdate.newCameraPosition(
                  CameraPosition(
                    target:LatLng(51.5174409, -2.5466184),
                  //  _destination.position,
                    zoom: 14.5,
                    tilt: 50.0,
                  ),
                ),
              ),
              style: TextButton.styleFrom(
                primary: Colors.white,
                textStyle: const TextStyle(fontWeight: FontWeight.w600),
              ),
              child: const Text('DEST'),
            )
        ],
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          GoogleMap(
            myLocationButtonEnabled: false,
            zoomControlsEnabled: false,
            initialCameraPosition: _initialCameraPosition,
            onMapCreated: (controller) => _googleMapController = controller,
            markers: {
              if (_origin != null) _origin,
              if (_destination != null) _destination
            },
            polylines: {
              if (_info != null)
                Polyline(
                  polylineId: const PolylineId('overview_polyline'),
                  color: Colors.red,
                  width: 5,
                  points: _info.polylinePoints
                      .map((e) => LatLng(e.latitude, e.longitude))
                      .toList(),
                ),
            },
            onLongPress: _addMarker,
          ),
          if (_info != null)
            Positioned(
              top: 20.0,
              child: Container(
                padding: const EdgeInsets.symmetric(
                  vertical: 6.0,
                  horizontal: 12.0,
                ),
                decoration: BoxDecoration(
                  color: Colors.yellowAccent,
                  borderRadius: BorderRadius.circular(20.0),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black26,
                      offset: Offset(0, 2),
                      blurRadius: 6.0,
                    )
                  ],
                ),
                child: Text(
                  '${_info.totalDistance}, ${_info.totalDuration}',
                  style: const TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        foregroundColor: Colors.black,
        onPressed: () => _googleMapController.animateCamera(
          _info != null
              ? CameraUpdate.newLatLngBounds(_info.bounds, 100.0)
              : CameraUpdate.newCameraPosition(_initialCameraPosition),
        ),
        child: const Icon(Icons.center_focus_strong),
      ),
    );
  }

  void _addMarker(LatLng pos) async {
    if (_origin == null || (_origin != null && _destination != null)) {
      // Origin is not set OR Origin/Destination are both set
      // Set origin
      setState(() {
        _origin = Marker(
          markerId: const MarkerId('origin'),
          infoWindow: const InfoWindow(title: 'Origin'),
          icon:
          BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen),
          position: pos,
        );
        // Reset destination
        _destination = null;

        // Reset info
        _info = null;
      });
    } else {
      // Origin is already set
      // Set destination
      setState(() {
        _destination = Marker(
          markerId: const MarkerId('destination'),
          infoWindow: const InfoWindow(title: 'Destination'),
          icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
          position: pos,
        );
      });

      // Get directions
      final directions = await DirectionsRepository()
          .getDirections(origin: _origin.position, destination: pos);
      setState(() => _info = directions);
    }
  }
}

Answer 1

Please refer to below code

class MapDemo extends StatelessWidget {
  const MapDemo({Key key}) : super(key: key);

 /*Controller*/
  GoogleMapController mapController;

  /*Variable declaration*/
  bool customFlag = false;
  BitmapDescriptor customIcon1;


 /*Custom Marker for Maps*/
  createMarker(context) {
    if (customIcon1 == null) {
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, ImagePaths.dcGlobe) /* ImagePaths.dcGlobe i san asset image */
          .then((icon) {
        customIcon1 = icon;
      });
    }
  }

 

  @override
  Widget build(BuildContext context) {
    createMarker(context);
    return Scaffold(
      body: Column(
        children: [
          LocationMaps(
            mapController: mapController,
            customFlag: customFlag,
            customIcon1: customIcon1,
            longitudeValues: 85,
            latitudeValues: 12.0,
          ),
          
        ],
      ),
    );
  }
}

class LocationMaps extends StatelessWidget {
  GoogleMapController mapController;
  bool customFlag;
  final BitmapDescriptor customIcon1;
  final longitudeValues;
  final latitudeValues;

  LocationMaps({
    Key key,
    this.mapController,
    this.customFlag,
    this.customIcon1,
    this.longitudeValues,
    this.latitudeValues,
  }) : super(key: key);

  double locationLatitude = 0.0;
  double locationLongitude = 0.0;

  LatLng _center;
  List<Marker> _markers = <Marker>[];

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

  @override
  Widget build(BuildContext context) {
    locationLatitude = double.parse(latitudeValues);
    locationLongitude = double.parse(longitudeValues);
    _center = LatLng(locationLatitude, locationLongitude);
    _markers.add(Marker(
        icon: customFlag == true ? customIcon1 : null,
        markerId: MarkerId(''),
        position: LatLng(locationLatitude, locationLongitude),
        infoWindow: InfoWindow(title: '')));
    return ClipRRect(
      borderRadius: BorderRadius.circular(8.0),
      child: Container(
        color: AppColors.creamColor,
        width: ScreenUtil().screenWidth,
        child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Container(
                width: ScreenUtil().screenWidth,
                height: ScreenUtil().setHeight(120.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: GoogleMap(
                  myLocationButtonEnabled: (Platform.isAndroid) ? true : false,
                  onMapCreated: _onMapCreated,
                  initialCameraPosition: CameraPosition(
                    target: _center,
                    zoom: 13.0,
                  ),
                  mapType: MapType.normal,
                  markers: Set<Marker>.of(_markers),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}