编程选择标记导航到位置Google_Maps_Flutter

f45qwnt8  于 12个月前  发布在  Flutter
关注(0)|答案(3)|浏览(165)

我正在尝试开发一种用户体验,向用户提供一个要前往的地点列表,在选择这些地点之一时,我希望它
1.将标记添加到Map
1.显示信息窗口
1.提供导航到该位置的选项。
我能够使用信息from this PR(似乎没有官方文档)从这个:


的数据
对此:



然而,显示标记信息仍然不能使给定的标记“激活”。当我选择标记时,插件的功能实际上在右下角显示导航到给定位置的选项,如下所示:



我希望在列表底部的场地选择中,一次按下即可在第三幅图中自动显示所有三个标准。也就是说:
1.位置的标记
1.信息窗口
1.用于导航到该位置的选项。
现在,用户必须单击底部列表中的条目,然后非常不直观地 * 单击Map上的标记 *,导航选项才会出现。

当用户在列表中选择一个项目时“点击”标记时,如何以编程方式启动“点击”事件?

以下是我当前用于更改视口、添加标记和显示信息窗口的代码:

Future<void> goSomewhere(id, name, distance, address, lat, lng) async {
final GoogleMapController controller = await _controller.future;
controller.animateCamera(CameraUpdate.newCameraPosition(
    CameraPosition(target: LatLng(lat, lng), zoom: 14.0)));
setState(() {
  _markers.add(Marker(
    markerId: MarkerId(id),
    position: LatLng(lat, lng),
    infoWindow: InfoWindow(
      title: name,
      snippet: address,
    ),
    onTap: () {
      //_pageController.jumpToPage(i);
    },
    icon: BitmapDescriptor.defaultMarker,
  ));
  print(MarkerId(id));
  controller.showMarkerInfoWindow(MarkerId(id));
});

字符串
}
目前,我的解决方案确实添加了标记并显示了信息窗口,但却没有为用户提供导航到该位置的选项,* 除非 * 用户单击标记。在其当前状态下,我构建的东西导致了非常不理想的用户体验。
我试过highlighting the marker这样的替代解决方案,但是它没有我想要的功能。我不明白插件中发生了什么事件,以及我发现的所有尝试选择标记并高亮显示它。简单地说,在标记单击会很有帮助.

8i9zcol2

8i9zcol21#

我没有得到一个完整的答案,但我想分享我的经验,以防其他人遇到这个问题并感到卡住。通过浏览Flutter Github /在论坛上询问,我能够得到三个关键的外卖:
1.据我所知,没有办法在Flutter中模拟标记的“点击”。我试着看the Kotlin/Swift APIs for platform channels来自己编写一些功能,但老实说,这远远超出了我的能力范围,我花了很多时间在上面。这也可能导致必须通过Google的好人的批准过程才能接受我的更改,但我现在没有时间
1.我发现了一个名为Maps Launcher的软件包,克雷格在评论部分也提到了这个软件包,它可以通过两种方法启动Map应用程序--按查询启动和按纬度/经度启动。这个功能实际上与点击标记然后选择右下角的两个Map选项中的一个时获得的功能相同。
1.我发现,当你点击标记时,你得到的两个图标之间的主要区别是,一个通过查询启动方向,另一个通过纬度和经度-就像Map启动器插件一样。
因此,有了这三条信息,我重新设计了应用程序,从这个:
x1c 0d1x的数据
看起来像这样:



现在一个用户:
1.从列表中删除位置。
1.选择一个新位置会添加一个标记并显示该位置的信息窗口
1.可以点击右边的按钮导航到给定的位置。
在我看来,这种体验要干净得多--在你可以启动的两个Map选项之间没有任何歧义(通过查询与纬度/经度)当选择一个标记时,作为一个按钮,启动Map图标现在在列表视图上。这也允许你导航到每个标记很容易只需要在列表视图中点击它,然后按右边的按钮来决定你是否需要导航方向。
将其添加到应用程序的代码非常简单:

new Flexible(
            child: ListView.builder(
            itemCount: venues.length,
            padding: EdgeInsets.all(4.0),
            itemBuilder: (context, index) {
              return Card(
                  color: _selectedIndex != null && _selectedIndex == index
                      ? Colors.greenAccent
                      : Colors.white,
                  child: ListTile(
                onTap: () {
                  goSomewhere(
                      venues[index].venueId,
                      venues[index].name,
                      venues[index].distance,
                      venues[index].formattedAddress,
                      double.parse(venues[index].latitude),
                      double.parse(venues[index].longitude)
                  );
                  _onSelected(index);
                },
                title: Text(
                  venues[index]
                      .name /*+ ' and ' + venues[index].formattedAddress*/,
                  style: TextStyle(fontWeight: FontWeight.w500),
                ),
                trailing: Container(
                    child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.blue,

                  ),
                      onPressed: () => MapsLauncher.launchQuery(
                          venues[index].formattedAddress),
                      child: Icon(Icons.assistant_navigation),
                )),
                subtitle: Text(venues[index].formattedAddress),
              ));
            },
          ))

字符串
这是一个微妙的区别,但我做了一些测试,我的(小)组用户似乎更喜欢这个,因为它更直观。此外,他们在Map应用程序中获得的位置有一个可识别的地址,无论他们按下哪个按钮。
虽然这不是对最初问题的“完整”回答,但我希望这可以帮助那些在Flutter之旅中坚持使用框架的人-尽管存在一些早期的障碍。

8ftvxx2r

8ftvxx2r2#

你先我一步!我正要回答这个问题早些时候,但当我重新加载页面,我看到你已经回答了它。虽然它似乎你已经找到了解决方案,你的问题,我想张贴我的答案仍然在这里。请参阅下面:
我找不到一种方法来以编程方式显示Map工具栏(导航到右下角给定位置的选项),因为您确实需要单击标记来显示它。但这里有一个我认为适合您的用例的解决方案:
1.通过在GoogleMap()小部件中设置mapToolbarEnabled: false来禁用Map工具栏。(Map工具栏只适用于Android)
1.创建一个自定义Map工具栏,从应用程序中启动GoogleMap和方向URL。该工具栏仅在您从列表视图中选择位置或单击标记时显示。
我使用url_launcher包来启动Google Maps和Directions URL。

Future<void> _launchUrl(bool isDir, double lat, double lon) async {
    String url = 'https://www.google.com/maps/search/?api=1&query=$lat,$lon';

    if (isDir) {
      url = 'https://www.google.com/maps/dir/?api=1&origin=Googleplex&destination=$lat,$lon';
    }

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

字符串
然后,我在自定义Map工具栏小部件上使用了上述方法

Widget mapToolBar() {
    return Row(
      children: [
        FloatingActionButton(
          child: Icon(Icons.map),
          backgroundColor: Colors.blue,
          onPressed: () {
            _launchUrl(false, {your_lat}, {your_lng})
          },
        ),
        FloatingActionButton(
          child: Icon(Icons.directions),
          backgroundColor: Colors.blue,
          onPressed: () {
            _launchUrl(true, {your_lat}, {your_lng};
          },
        ),
      ],
    );
  }


然后将自定义小部件放入Googlemap()小部件中

Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: <Widget>[
        Expanded(
          flex: 7,
          child: Stack(children: [
            GoogleMap(
                  .
                  .
                  .
              ),
            mapToolBar()
          ]),
        ),
        _pageViewBuilder(context),
      ]),
    );
  }

jchrr9hc

jchrr9hc3#

我知道这是一个老帖子,但我有相同/类似的问题,并致力于这么多的时间,它. Posted it here google_maps_flutter refresh InfoWindow
我也试过突出显示标记,空信息窗口,几乎所有的东西。我会给予它去你的解决方案,当我有机会。谢谢你

相关问题