Flutter URL Launcher 谷歌地图答案

【问题标题】：Flutter URL Launcher Google MapsFlutter URL Launcher 谷歌地图
【发布时间】：2018-08-28 07:22:17
【问题描述】：

List.dart

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

class List extends StatefulWidget {

  @override
  ListState createState() {
    return new ListState();
  }
}

class ListState extends State<List> {

  static const double lat = 2.813812,  long = 101.503413;
  static const String map_api= "API_KEY";

  @override
  Widget build(BuildContext context) {

    //method to launch maps
    void launchMap() async{
      const url = "https://maps.google.com/maps/search/?api=$map_api&query=$lat,$long";
      if (await canLaunch(url)) {
        print("Can launch");
        void initState(){
          super.initState();

          canLaunch( "https://maps.google.com/maps/search/?api=$map_api&query=$lat,$long");
        }

        await launch(url);
      } else {
        print("Could not launch");
        throw 'Could not launch Maps';
      }
    }

    //method to bring out dialog
    void makeDialog(){
      showDialog(
          context: context,
          builder: (_) => new SimpleDialog(
            contentPadding: EdgeInsets.only(left: 30.0, top: 30.0),
            children: <Widget>[
              new Text("Address: ",
                style: TextStyle(
                  fontWeight: FontWeight.bold
                ),
              ),
              new ButtonBar(
                children: <Widget>[
                  new IconButton(
                      icon: Icon(Icons.close),
                      onPressed: (){
                        Navigator.pop(context);
                      }
                      )
                ],
              )
            ],
          )
      );
    }

    return new Scaffold(
      body: new ListView.builder(
          itemBuilder: (context, index) => ExpansionTile(
              title: new Text("State ${index+1}"),
              children: <Widget>[
                new ListTile(
                  title: new Text("Place 1"),
                  trailing: new Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      new IconButton(
                          icon: Icon(Icons.info),
                          onPressed: makeDialog
                      ),
                      new IconButton(
                          icon: Icon(Icons.directions),
                          onPressed: launchMap
                      )
                    ],
                  ),
                ),
                new Divider(height: 10.0),
                new ListTile(
                  title: new Text("Place 2"),
                  trailing: new Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      new IconButton(
                          icon: Icon(Icons.info),
                          onPressed: makeDialog
                      ),
                      new IconButton(
                          icon: Icon(Icons.directions),
                          onPressed: launchMap
                      )
                    ],
                  ),
                )
              ],
          ),
        itemCount: 5,
      ),
    );
  }
}

我的项目目前涉及从 URL 启动器库启动 Google 地图。但我目前遇到的问题是谷歌地图会打开，但它不会打开我设置为变量的纬度和经度。

如何根据坐标设置启动它的 URL？还是有更好的选择？

请帮忙。

【问题讨论】：

试试这个网址，String geoUri = 'maps.google.com/maps?q=loc:$lat,$long';

标签： dart flutter

【解决方案1】：

你需要为url_launcher传递api=1，你必须传递编码后的url Uri.encodeFull()。

在此sample project 中查找更多详细信息。

launchURL() async {

  static const String homeLat = "37.3230";
  static const String homeLng = "-122.0312";

  static final String googleMapslocationUrl = "https://www.google.com/maps/search/?api=1&query=${TextStrings.homeLat},${TextStrings.homeLng}";



final String encodedURl = Uri.encodeFull(googleMapslocationUrl);

    if (await canLaunch(encodedURl)) {
      await launch(encodedURl);
    } else {
      print('Could not launch $encodedURl');
      throw 'Could not launch $encodedURl';
    }
  }

【讨论】：

encodeFull 躲避我的时间最长，因为我的网址在 Android 上有效，但在 iOS 上无效。谢谢！

【解决方案2】：

您可以使用Map Launcher 插件

if (await MapLauncher.isMapAvailable(MapType.google)) {
  await MapLauncher.launchMap(
    mapType: MapType.google,
    coords: Coords(31.233568, 121.505504),
    title: "Shanghai Tower",
    description: "Asia's tallest building",
  );
}

【讨论】：

【解决方案3】：

试试这个方法

  ///
  /// for launching map with specific [latitude] and [longitude]
  static Future<void> openMap({
     required double latitude,
     required double longitude,
     required String label,
  }) async {
     final query = '$latitude,$longitude($label)';
     final uri = Uri(scheme: 'geo', host: '0,0', queryParameters: {'q': query});

     await launch(uri.toString());
   }

【讨论】：

【解决方案4】：

为了启动谷歌地图，简单搜索的格式[1]应该如下：

https://www.google.com/maps/search/?api=1&query=ADDRESS_OR_LATLNG_HERE

在您的情况下，您插入的是“API_KEY”，而不是 api 参数的值 1，这是不正确的。该值应始终为 1，因此可以进行硬编码。

[1]https://developers.google.com/maps/documentation/urls/guide#forming-the-url

【讨论】：