Flutter URL Launcher Google Maps

问题

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

My project currently involves launching Google Maps from the URL launcher library. But the problem I am currently having is Google Maps will open but it does not open to the latitude and longitude that I have set as the variable.

How do i set the URL for it to launch according to the coordinates? Or is there a better alternative?

Please assist.

回答1:

You need to pass api=1 for url_launcher, you have to pass the encoded url Uri.encodeFull().

find more details in this 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';
    }
  }

回答2:

You can use a Map Launcher plugin

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 Google Maps, the format[1] for a simple search should be as followed:

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

In your case, instead of having the value of 1 for the api parameter, you are inserting "API_KEY", which is incorrect. The value should always be 1, so this can be hard-coded.

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

来源：https://stackoverflow.com/questions/52052232/flutter-url-launcher-google-maps