时间戳

首页 > 解决方案 > 调用屏幕时如何显示地图

flutter - 调用屏幕时如何显示地图

问题描述

我一直在使用 map_view: ^0.0.14 插件来显示地图。Mapview.show() 方法不返回小部件。它返回 void 所以我可以调用 show() 方法并显示地图。我想在页面加载时显示地图。我怎样才能做到这一点。

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Google Maps'),
      ),
      body: new Center(
        child: Container(
          child: RaisedButton(
            child: Text('Tap me'),
            color: Colors.blue,
            textColor: Colors.white,
            elevation: 7.0,
            onPressed: ( ) {
              mapView.show(
                  new MapOptions(
                      mapViewType: MapViewType.normal,
                      showMyLocationButton: true,
                      showCompassButton: true,
                      showUserLocation: true,
                      initialCameraPosition: new CameraPosition(new Location(11.6643, 78.1460), 14.0),
                      title: 'Google Map'));
          },
          ),
        ),
      ),
    );
  }

标签： flutter

解决方案

据我所知， map_view 没有小部件。你可以试试google_maps_flutter，它有一个小部件，可以让你通过控制器进行平移或缩放等操作。

您首先需要在应用的清单 (Android) 中指定您的 API 密钥：

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

或应用程序委托（iOS）：

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

在 iOS 上，您还必须Info.plist使用 keyio.flutter.embedded_views_preview和 value添加一个布尔值YES。

然后您可以将 GoogleMap 小部件添加到您的小部件树中：

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text('Google Maps demo')),
      body: MapsDemo(),
    ),
  ));
}

class MapsDemo extends StatefulWidget {
  @override
  State createState() => MapsDemoState();
}

class MapsDemoState extends State<MapsDemo> {

  GoogleMapController mapController;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(15.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Center(
            child: SizedBox(
              width: 300.0,
              height: 200.0,
              child: GoogleMap(
                onMapCreated: _onMapCreated,
              ),
            ),
          ),
          RaisedButton(
            child: const Text('Go to London'),
            onPressed: mapController == null ? null : () {
              mapController.animateCamera(CameraUpdate.newCameraPosition(
                const CameraPosition(
                  bearing: 270.0,
                  target: LatLng(51.5160895, -0.1294527),
                  tilt: 30.0,
                  zoom: 17.0,
                ),
              ));
            },
          ),
        ],
      ),
    );
  }

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

推荐阅读