Flutter URL Launcher 谷歌地图

Question

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 Maps启动。但我当前遇到的问题是，Google Maps会打开，但它不会打开我设置为变量的纬度和经度。

我该如何设置URL以使其根据坐标启动？或者有更好的替代方案吗？

请帮忙解决。

- steven sathish

---

请使用这个网址尝试：String geoUri = 'http://maps.google.com/maps?q=loc:$lat,$long'; 将$lat和$long替换为相应的经度和纬度即可。 - Shyju M

Answer 1

在使用url_launcher时，您需要传递 Uri.encodeFull() 编码后的URL，并且还需要通过api=1参数进行配置。

在这个示例项目中可以找到更多细节。

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';
    }
  }

- dhanasekar

---

encodeFull让我困扰了很长时间，因为我的URL在Android上可以工作但在iOS上却不行。谢谢！ - Halogen

Answer 2

尝试这种方法。

  ///
  /// 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());
   }

- GJJ2019

Answer 3

你可以使用一个地图启动器插件。

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",
  );
}

- Alex Moran

Answer 4

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

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

在您的情况下，api参数的值不应该是"API_KEY"，而应该是1。因此，这个值可以被硬编码。

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

- Adam Kuehling