Flutter中的Google地图导航

Question

我对 Flutter 还不熟悉。

我发现 Flutter 不支持行内地图，只支持静态地图视图。

我想构建一个应用，在地图上显示驾驶路线。

在 Flutter 中是否有可能创建相同的应用？

- Jayadeep

---

你找到解决方法了吗？ - Mattias

Answer 1

您可以在Flutter中使用android_intent库来启动Google Maps并在Android上获取方向。

库: https://pub.dartlang.org/packages/android_intent

在iOS中，您可以同时使用Google API（如comgooglemaps）或Google地图URL（我选择这个）和maps.apple.com。

String origin="somestartLocationStringAddress or lat,long";  // lat,long like 123.34,68.56
String destination="someEndLocationStringAddress or lat,long";
if (new LocalPlatform().isAndroid) {
      final AndroidIntent intent = new AndroidIntent(
          action: 'action_view',
          data: Uri.encodeFull(
              "https://www.google.com/maps/dir/?api=1&origin=" +
                  origin + "&destination=" + destination + "&travelmode=driving&dir_action=navigate"),
          package: 'com.google.android.apps.maps');
      intent.launch();
    }
    else {
        String url = "https://www.google.com/maps/dir/?api=1&origin=" + origin + "&destination=" + destination + "&travelmode=driving&dir_action=navigate";
        if (await canLaunch(url)) {
              await launch(url);
       } else {
            throw 'Could not launch $url';
       }
    }

希望它有所帮助。

- benyamin

---

我可以帮您进行翻译。原文中OP提到他想制作一个显示方向的应用程序，而你的回答是打开谷歌地图应用并进入导航功能。 - CopsOnRoad

这种方式在应用程序中打开了一个Webview，我们需要打开Google Maps应用程序。 - BaDo

也许不完全符合他们的要求，但据我所知，本地视图无法导航到某一点，所以我会给你点赞。有用的信息。 - Idistic

谢谢我的朋友:D，这正是解决我的问题的方法:/ - ben

Android Intent 包已被弃用，现已被 Android Intent Plus 取代。链接 - Shanu

Answer 2

在撰写本答案时，关于行内地图的工作仍在进行中。但由于Flutter的开发人员已经赋予了其他人开发插件的能力，因此有一些替代方案。您可能想要查看以下内容：

https://medium.com/@matthew.smith_66715/maps-in-flutter-a1ac49ab554b

如果您只想获取用户位置：

https://pub.dartlang.org/packages/location

如果您想关注新的更新，我在这里找到了一些有趣的讨论：

https://github.com/flutter/flutter/issues/73

- Sunit Gautam

---

除了一件事情，我已经从上面的链接中得到了所有的东西。也有可能展示最快的路线吗？ - Jayadeep

@Jayadeep，你是怎么得到这条路线并将其着色成图片中的样子的？ - Neeraj Yadav

那只是问题的屏幕截图。 - Jayadeep

@Jayadeep 我尝试使用String origin = currentLocation（来自位置插件的当前位置）和String destination =“6.873941599999999,79.88108439999999”，但没有成功。有什么想法为什么？ - danu

请注意，Mapview插件已经停止使用。 - moolsbytheway

Answer 3

有点晚了，但可能对某些人有帮助。

据我所知，谷歌目前没有为Flutter提供公开的API或包，可以轻松创建此导航。最好的方法是从Google的DirectionsAPI获取方向数据。使用这些数据，您可以创建折线，并且还可以获得持续时间、步骤或距离的数据。您需要根据当前用户位置重新绘制自定义标记，并像导航一样操作。

更简单的方法可能是通过MapBox及其Navigation SDK。请查看此软件包https://pub.dev/packages/flutter_mapbox_navigation和官方文档https://docs.mapbox.com/android/navigation/guides/。

- David Sedlář

Answer 4

使用依赖 - url_launcher: ^6.1.4

static Future<void> openMap(double latitude, double longitude) async {
String iosUrl = 'https://maps.apple.com/?q=$latitude,$longitude';
if (GetPlatform.isAndroid) {
  String googleUrl ='https://www.google.com/maps/search/?api=1&query=$latitude,$longitude';
  if (await canLaunch(googleUrl)) {
    await launch(googleUrl);
  } else {
    throw 'Could not launch $googleUrl';
  }
}else{
  if (await canLaunch(iosUrl)) {
    await launch(iosUrl);
  } else {
    throw 'Could not open the map.';
  }
}

}

这段代码在安卓和IOS上运行良好

对于IOS，请将此代码放入Info.plist中

 <key>LSApplicationQueriesSchemes</key>
<array>
 <string>googlechromes</string>
 <string>comgooglemaps</string>
 <string>iosamap</string>
</array>

在 Android 中，将它放在 manifest.xml 文件中。

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

 <queries>
    <package android:name="com.google.android.apps.maps" />
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:mimeType="text/plain" />
    </intent>
</queries>

- Jatin Sharma

---

你能给我更好的解决方案吗？ - Jatin Sharma

Answer 5

我能够仅使用url_launcher（无需其他软件包或本地端更改）打开谷歌地图

使用mode属性，您可以选择如何处理URL，使用externalApplication或externalNonBrowserApplication将会在设备上打开谷歌地图

    Position currentPosition = await Geolocator.getCurrentPosition();
    String origin = '${currentPosition.latitude},${currentPosition.longitude}';
    String destination = '${currentPosition.latitude + 0.002},${currentPosition.longitude - 0.002}';

    final Uri _url = Uri.parse('https://www.google.com/maps/dir/?api=1&origin=$origin&destination=$destination&travelmode=driving&dir_action=navigate');

    await launchUrl(
        _url,
        mode: LaunchMode.externalApplication,
    );

- Basel Abuhadrous