我正在尝试开发一种用户体验,向用户提供一个要前往的地点列表,在选择这些地点之一时,我希望它
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这样的替代解决方案,但是它没有我想要的功能。我不明白插件中发生了什么事件,以及我发现的所有尝试选择标记并高亮显示它。简单地说,在标记单击会很有帮助.
3条答案
按热度按时间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图标现在在列表视图上。这也允许你导航到每个标记很容易只需要在列表视图中点击它,然后按右边的按钮来决定你是否需要导航方向。
将其添加到应用程序的代码非常简单:
字符串
这是一个微妙的区别,但我做了一些测试,我的(小)组用户似乎更喜欢这个,因为它更直观。此外,他们在Map应用程序中获得的位置有一个可识别的地址,无论他们按下哪个按钮。
虽然这不是对最初问题的“完整”回答,但我希望这可以帮助那些在Flutter之旅中坚持使用框架的人-尽管存在一些早期的障碍。
8ftvxx2r2#
你先我一步!我正要回答这个问题早些时候,但当我重新加载页面,我看到你已经回答了它。虽然它似乎你已经找到了解决方案,你的问题,我想张贴我的答案仍然在这里。请参阅下面:
我找不到一种方法来以编程方式显示Map工具栏(导航到右下角给定位置的选项),因为您确实需要单击标记来显示它。但这里有一个我认为适合您的用例的解决方案:
1.通过在
GoogleMap()
小部件中设置mapToolbarEnabled: false
来禁用Map工具栏。(Map工具栏只适用于Android)1.创建一个自定义Map工具栏,从应用程序中启动GoogleMap和方向URL。该工具栏仅在您从列表视图中选择位置或单击标记时显示。
我使用url_launcher包来启动Google Maps和Directions URL。
字符串
然后,我在自定义Map工具栏小部件上使用了上述方法
型
然后将自定义小部件放入
Googlemap()
小部件中型
jchrr9hc3#
我知道这是一个老帖子,但我有相同/类似的问题,并致力于这么多的时间,它. Posted it here google_maps_flutter refresh InfoWindow
我也试过突出显示标记,空信息窗口,几乎所有的东西。我会给予它去你的解决方案,当我有机会。谢谢你