Добавление маркеров местоположения пользователей на карту с помощью Flutter - PullRequest
Новая
       91

Добавление маркеров местоположения пользователей на карту с помощью Flutter

0 голосов
/ 13 июля 2020

Я работаю над приложением с Flutter, где пользователи регистрируются и определяют свое местоположение с помощью формы автозаполнения Google Maps. Текстовая форма извлекает широту и долготу и сохраняет информацию в базе данных Firebase. Здесь моя модель пользователя, в которой местоположение, широта и долгота хранятся для каждого пользователя. Местоположение - это просто строка с названием города.

user.dart 

class User {
  String key;
  String email;
  String userId;
  String displayName;
  String userName;
  String location;
  String latitude;
  String longitude;

  User({
    this.email,
    this.userId,
    this.displayName,
    this.key,
    this.location,
    this.latitude,
    this.longitude,
    this.userName,
  });

  User.fromJson(Map<dynamic, dynamic> map) {
    if (map == null) {
      return;
    }
   
    email = map['email'];
    userId = map['userId'];
    displayName = map['displayName'];
    key = map['key'];
    location = map['location'];
    latitude = map['latitude'];
    longitude = map['longitude'];
    userName = map['userName'];
  }
  toJson() {
    return {
      'key': key,
      "userId": userId,
      "email": email,
      'displayName': displayName,
      'userId': userId,
      'location': location,
      'latitude': latitude,
      'longitude': longitude,
      'userName': userName,
      
    };
  }

  User copyWith({
    String email,
    String userId,
    String displayName,
    String key,
    String location,
    String latitude,
    String longitude,
    String userName,
  }) {
    return User(
      email: email ?? this.email,
      displayName: displayName ?? this.displayName,
      key: key ?? this.key,
      location: location ?? this.location,
      latitude: latitude ?? this.latitude,
      longitude: longitude ?? this.longitude,
      userId: userId ?? this.userId,
      userName: userName ?? this.userName,
    );
  }
}

Вот как они хранятся в базе данных реального времени в Firebase.

введите здесь описание изображения

Теперь я хотел бы вставить маркер для каждого пользователя, который будет отображаться на моей странице карты. Страница Моя карта показана ниже. Есть просто плавающая кнопка, которая вставляет маркер в зависимости от текущего положения, показанного на карте.

mapPage.dart 

import 'dart:async';

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

class MapPage extends StatefulWidget {
  const MapPage({Key key, this.scaffoldKey}) : super(key: key);

  final GlobalKey<ScaffoldState> scaffoldKey;
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  Completer<GoogleMapController> _controller = Completer();

  static const LatLng _center = const LatLng(41.543924, 12.285448);

  final Set<Marker> _markers = {};

  LatLng _lastMapPosition = _center;

  void _onAddMarkerButtonPressed() {
    setState(() {
      _markers.add(Marker(
        // This marker id can be anything that uniquely identifies each marker.
        markerId: MarkerId(_lastMapPosition.toString()),
        position: _lastMapPosition,
        infoWindow: InfoWindow(
          title: 'Title marker',
          snippet: 'Description marker',
        ),
        icon: BitmapDescriptor.defaultMarker,
      ));
    });
  }

  void _onCameraMove(CameraPosition position) {
    _lastMapPosition = position.target;
  }

  void _onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: CustomAppBar(
          // scaffoldKey: widget.scaffoldKey,
          title: customTitleText(
            'Users on map',
          ),
        ),
        body: Stack(
          children: <Widget>[
            GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: CameraPosition(
                target: _center,
                zoom: 5.5,
              ),
              markers: _markers,
              onCameraMove: _onCameraMove,
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Align(
                alignment: Alignment.topRight,
                child: Column(
                  children: <Widget>[
                    FloatingActionButton(
                      onPressed: _onAddMarkerButtonPressed,
                      materialTapTargetSize: MaterialTapTargetSize.padded,
                      backgroundColor: Colors.green,
                      child: const Icon(Icons.add_location, size: 36.0),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Можете ли вы помочь мне понять как действовать, пожалуйста?

...