如何打印几个标记google map api 0.5.7 Flutter

Posted

技术标签:

【中文标题】如何打印几个标记google map api 0.5.7 Flutter【英文标题】:How to print several markers google map api 0.5.7 Flutter 【发布时间】:2019-09-12 00:55:32 【问题描述】:

我正在尝试使用 google map api 最新版本(0.5.7),但在我的地图上只打印了一个标记,但数据库上有很多标记,在我尝试放置最后一个之前它运行良好版本。有人知道如何打印许多标记吗?我在使用标记的地方放了箭头。

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

import 'package:location/location.dart';

import 'package:geoflutterfire/geoflutterfire.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:rxdart/rxdart.dart';
import 'dart:async';
import 'package:intl/intl.dart';

import 'customs_icons_icons.dart';
import 'Dialogs.dart';
import 'Metro.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: FireMap(),
        ));
  


class FireMap extends StatefulWidget 
  State createState() => FireMapState();


class FireMapState extends State<FireMap> 
  GoogleMapController mapController;
  Location location = new Location();
  Dialogs dialogs = new Dialogs();
  Firestore firestore = Firestore.instance;
  Geoflutterfire geo = Geoflutterfire();

  BehaviorSubject<double> radius = BehaviorSubject(seedValue: 100.0);
  Stream<dynamic> query;

  StreamSubscription subscription;`enter code here`

  Map<MarkerId, Marker> markers = <MarkerId, Marker>;
  MarkerId selectedMarker;
  int _markerIdCounter = 1;

  build(context) 
    return Stack(children: [
      GoogleMap(
        initialCameraPosition:
            CameraPosition(target: LatLng(45.758077, 4.833316), zoom: 15),
        onMapCreated: _onMapCreated,
        myLocationEnabled: true,
        mapType: MapType.normal,
        compassEnabled: true,
        markers: Set<Marker>.of(markers.values),<---
      ),
      Positioned(
        bottom: 20,
        right: 20,
        child: Container(
          height: 80.0,
          width: 80.0,
          child: FittedBox(
            child: FloatingActionButton(
              child: Icon(CustomsIcons.ticket, color: Colors.black),
              backgroundColor: Colors.pink[200],
              onPressed: () => dialogs.information(
                  context, 'Confirmer ?', 'description', addGeoPoint),
            ),
          ),
        ),
      ),
    ]);
  

  _onMapCreated(GoogleMapController controller) 
    _startQuery();
   setState(
      () 
        mapController = controller;
      ,
    );
  


  void _updateMarkers(List<DocumentSnapshot> documentList)  <---
    final String markerIdVal = 'marker_id_$_markerIdCounter';
    _markerIdCounter++;
    final MarkerId markerId = MarkerId(markerIdVal);
    print(documentList);
    markers.clear();
    documentList.forEach(
      (DocumentSnapshot document) 
        GeoPoint pos = document.data['position']['geopoint'];
        var marker = Marker(
            markerId: markerId,
            position: LatLng(pos.latitude, pos.longitude),
            icon: BitmapDescriptor.fromAsset('assets/ticket_point.png'),
            infoWindow:
                InfoWindow(title: 'Ici à :', snippet: document.data['time']));
        setState(() 
          markers[markerId] = marker;
        );
      ,
    );
  

【问题讨论】:

【参考方案1】:

有效!我刚刚在“(DocumentSnapshot 文档)”中移动了markerIDcounter,所有的标记都出现了

【讨论】:

【参考方案2】:

我就是这么干的

class _MapActivityState extends State<MapActivity> 
  GoogleMapController _controller;
  static LatLng _center = LatLng(0.0, 0.0);
  Position currentLocation;
  Set<Marker> _markers = ;

  void _onMapCreated(GoogleMapController controller) 
    setState(() 
      _controller = controller;
    );
  

  @override
  void initState() 
    super.initState();
    setState(() 
      getUserLocation();
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Stack(
        children: <Widget>[
          GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(target: _center, zoom: 15),
            markers: _markers,
          ),
        ],
      ),
    );
  
 getUserLocation() async 
    currentLocation = await locateUser();
    setState(() 
      for (int i = 0; i < myresponse.data.length; i++) 
        _markers.add(Marker(
            markerId: MarkerId(myresponse[i].userId),
            position: LatLng(double.parse(myresponse[i].latitude),
                double.parse(myresponse[i].longitude)),
            icon: myresponse[i].capacity.contains("7.2")
                ? BitmapDescriptor.fromAsset(
                    'assets/charger_location.png',
                  )
                : BitmapDescriptor.fromAsset(
                    'assets/marker_green.png',
                  ),
            infoWindow: InfoWindow(
                title: myresponse[i].stationName,
                snippet: myresponse[i].contactPerson,
                onTap: () => _onTap(myresponse[i]))));
      
    );
 

【讨论】:

以上是关于如何打印几个标记google map api 0.5.7 Flutter的主要内容,如果未能解决你的问题,请参考以下文章

Google Maps JavaScript API 地理位置标记

如何处理 Google Map Direction API 中的 0,0 标记错误?

Google Maps API v3:如何动态更改标记图标?

Google Maps API,添加带有标签的自定义 SVG 标记

如何在 Google Maps API 中移动标记

如何使用 JavaScript 在 Google Maps API 中仅获取一个标记