颤振谷歌地图无法加载

Question

几周来，我一直在尝试加载Flutter谷歌地图。google_maps_flutter.dart。我已经试过了我能想到的所有东西。我是Flutter的新手，所以我确信这是一个新手的错误，但我不知道。我已经加载了包，并在yaml文件中设置了依赖项。我已经更新了API，实际上是两次，以确保它们是正确的。Android和iOS SDK都在谷歌云上启用。我进行了一些"打印测试"，他们甚至超越了谷歌地图的调用，但什么都没发生。除了单击"路线"按钮之外，屏幕上没有出现任何闪烁。我把下面的代码包括在内，希望有人能帮我更正。它打印了所有三个测试打印，但谷歌地图什么都没发生。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
const _url = 'https://store-x36sk.mybigcommerce.com/ice-cream-flavors/';
const _menuurl = 'https://store-x36sk.mybigcommerce.com/menu/';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  Completer<GoogleMapController> _controller = Completer();
  static const LatLng _center =
      const LatLng(37.42796133580664, -122.085749655962);
  _launchURL() async {
    return await canLaunch(_url)
        ? await launch(_url)
        : throw 'Could not launch $_url';
  }
  _menulaunchURL() async {
    return await canLaunch(_menuurl)
        ? await launch(_menuurl)
        : throw 'Could not launch $_menuurl';
  }
  void _onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
  }
  _maplaunch() async {
    print('1st test');
    // return
    print('2nd test');
    // MaterialApp(
    // home: Scaffold(
    //   appBar: AppBar(
    //     title: Text('On Your Way to Lake City'),
    //     backgroundColor: Colors.purple.shade100,
    //   ),
    //   body:
    await GoogleMap(
      onMapCreated: _onMapCreated,
      // mapType: MapType.hybrid,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 11.0,
      ),
      // ),
      // ),
    );
    print('3rd test');
  }
  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 2),
                  child: Text(
                    'Lake City Creamery & Coffee',
                    style: TextStyle(
                      color: Colors.purple,
                      fontWeight: FontWeight.bold,
                      fontSize: 20.0,
                    ),
                  ),
                ),
                Text(
                  '5465 St Rt 29, Celina, OH',
                  style: TextStyle(
                    color: Colors.purple,
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                  ),
                ),
                //   FavoriteWidget(),
              ],
            ),
          ),
        ],
      ),
    );
    Color color = Theme.of(context).primaryColor;
    Widget buttonSection = Container(
      padding: const EdgeInsets.only(left: 5, top: 5, right: 5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          MaterialButton(
            onPressed: _launchURL,
            child: _buildButtonColumn(Colors.purple, Icons.icecream, 'Flavors'),
            padding: EdgeInsets.all(16),
            shape: CircleBorder(),
            color: Colors.pink.shade50,
          ),
          MaterialButton(
            onPressed: _menulaunchURL,
            child: _buildButtonColumn(Colors.purple, Icons.restaurant, 'Menu'),
            padding: EdgeInsets.all(16),
            shape: CircleBorder(),
            color: Colors.pink.shade50,
          ),
          MaterialButton(
            onPressed: () {},
            // TO DO onPressed
            child: _buildButtonColumn(Colors.purple, Icons.share, 'Share'),
            padding: EdgeInsets.all(16),
            shape: CircleBorder(),
            color: Colors.pink.shade50,
          ),
          MaterialButton(
            onPressed: _maplaunch,
            child: _buildButtonColumn(Colors.purple, Icons.directions, 'Route'),
            padding: EdgeInsets.all(16),
            shape: CircleBorder(),
            color: Colors.pink.shade50,
          ),
        ],
      ),
    );

Answer 1

GoogleMap是一个小部件，因此您应该启用render函数。在这种情况下，您希望在用户点击按钮时显示地图。

_maplaunch() async {
  Navigator.of(context).push(MaterialPageRoute(builder: (_) => RoutePage()));
}

并添加一个新的页面

class RoutePage extends StatelessWidget {
  static const LatLng _center =
      const LatLng(37.42796133580664, -122.085749655962);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        // mapType: MapType.hybrid,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

Answer 2

欢迎使用Stackoverflow。您提到您已经完成了所有操作，除了将其添加到AndroidManifest.xml文件中，iOS上的info.plist也是如此。

这就是安卓系统的外观。

<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="xxxxxxxxxxx-xxxxxxxxxxxxxx"
/>