簡體   English   中英

無法使用“google_maps_flutter”插件在 Flutter 中顯示當前用戶位置

[英]Can't show current user location in Flutter using 'google_maps_flutter' plugin

我正在嘗試使用 flutter 在 map 視圖中顯示當前用戶位置。 在iOS中,很簡單,添加self.mapView.showsUserLocation = YES; 這將在 map 視圖中顯示當前用戶位置。 但是在flutter中,看起來很復雜,需要寫很多代碼和插件。

順便說一句,對於Flutter中的這個功能,有沒有像原生iOS這樣的簡單解決方案?

我還試圖以 flutter 的方式實現它,為此目的使用“geolocator”和“google_maps_flutter”插件,但在運行時在日志中出現異常。

Installing build\app\outputs\apk\app.apk...
Debug service listening on ws://127.0.0.1:51924/x_FSkxlnOcY=/ws
Syncing files to device sdk gphone x86...
W/one.cliffjumpe(14833): Accessing hidden method Landroid/content/Context;->getFeatureId()Ljava/lang/String; (greylist, reflection, allowed)
E/flutter (14833): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: PlatformException(ERROR_GEOCODING_COORDINATES, grpc failed, null)
E/flutter (14833): #0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:569:7)
E/flutter (14833): #1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:156:18)

這是我的代碼片段 -

import 'package:flutter/cupertino.dart';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class _MapState extends State<MapScreen> {
  Completer<GoogleMapController> controller1;

  static LatLng _initialPosition;
  final Set<Marker> _markers = {};
  static  LatLng _lastMapPosition = _initialPosition;

  @override
  void initState() {
    super.initState();
    _getUserLocation();
  }
  void _getUserLocation() async {
    Position position = await Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
    List<Placemark> placemark = await Geolocator().placemarkFromCoordinates(position.latitude, position.longitude);
    setState(() {
      _initialPosition = LatLng(position.latitude, position.longitude);
      print('placemark : ${placemark[0].name}');
    });
  }


  _onMapCreated(GoogleMapController controller) {
    setState(() {
      controller1.complete(controller);
    });
  }

  MapType _currentMapType = MapType.normal;

  void _onMapTypeButtonPressed() {
    setState(() {
      _currentMapType = _currentMapType == MapType.normal
          ? MapType.satellite
          : MapType.normal;
    });
  }

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

  _onAddMarkerButtonPressed() {
    setState(() {
      _markers.add(
          Marker(
              markerId: MarkerId(_lastMapPosition.toString()),
              position: _lastMapPosition,
              infoWindow: InfoWindow(
                  title: "Pizza Parlour",
                  snippet: "This is a snippet",
                  onTap: (){
                  }
              ),
              onTap: (){
              },

              icon: BitmapDescriptor.defaultMarker));
    });
  }
  Widget mapButton(Function function, Icon icon, Color color) {
    return RawMaterialButton(
      onPressed: function,
      child: icon,
      shape: new CircleBorder(),
      elevation: 2.0,
      fillColor: color,
      padding: const EdgeInsets.all(7.0),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _initialPosition == null ? Container(child: Center(child:Text('loading map..', style: TextStyle(fontFamily: 'Avenir-Medium', color: Colors.grey[400]),),),) : Container(
        child: Stack(children: <Widget>[
          GoogleMap(
            markers: _markers,

            mapType: _currentMapType,
            initialCameraPosition: CameraPosition(
              target: _initialPosition,
              zoom: 14.4746,
            ),
            onMapCreated: _onMapCreated,
            zoomGesturesEnabled: true,
            onCameraMove: _onCameraMove,
            myLocationEnabled: true,
            compassEnabled: true,
            myLocationButtonEnabled: false,

          ),
          Align(
            alignment: Alignment.topRight,
            child: Container(
                margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
                child: Column(
                  children: <Widget>[
                    mapButton(_onAddMarkerButtonPressed,
                        Icon(
                            Icons.add_location
                        ), Colors.blue),
                    mapButton(
                        _onMapTypeButtonPressed,
                        Icon(
                          IconData(0xf473,
                              fontFamily: CupertinoIcons.iconFont,
                              fontPackage: CupertinoIcons.iconFontPackage),
                        ),
                        Colors.green),
                  ],
                )),
          )
        ]),
      ),
    );
  }
}

請與您的Google_maps_flutter插件一起使用插件地理定位器插件

不要忘記在您的androidmanifest.xml中添加使用權限 android:name="android.permission.ACCESS_FINE_LOCATION"

關於問題:問題出在 android 仿真器上。 在模擬器中更新谷歌播放服務應用程序然后重新啟動模擬器后再次解決了我的問題。

對於簡化的實現,我認為 Vasanth Vadivel 已經在這里推薦的地理定位器插件會很棒。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM