gpt4 book ai didi

flutter - 以编程方式选择标记以导航到位置 Google_Maps_Flutter

转载 作者:行者123 更新时间:2023-12-04 13:09:33 25 4
gpt4 key购买 nike

我正在尝试开发一种用户体验,向用户提供要前往的地点列表,并在选择这些地点之一后,我希望它

  • 向 map 添加标记
  • 显示信息窗口
  • 提供导航到
    地点。

  • 我能够使用信息 from this PR (似乎没有官方文档)从这里开始:
    Before use of PR
    对此:
    Functionality after using the showMarkerInfo function
    但是,显示标记信息仍然不会使给定的标记“处于事件状态”。当我选择标记时,插件的功能实际上会在右下角显示用于导航到给定位置的选项,如下所示:
    Functionality of the Google_Maps_Flutter plugin when the marker is actually selected.
    我想要的是选择列表底部的 field ,只需按一下即可在第三张图像中自动显示所有三个标准。也就是说,再次:
  • 位置标记
  • 信息窗口
  • 导航到该位置的选项。

  • 现在,用户必须单击底部列表中的条目,然后不直观地单击 map 上的标记才能显示导航选项。
    我将如何以编程方式启动当用户从列表中选择项目时“点击”标记时发生的“点击”事件?
    这是我当前用于更改视口(viewport)、添加标记和显示信息窗口的代码:
    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 ,但它没有我正在寻找的功能。我不明白在点击时“选择”标记的插件中发生了什么事件,并且我发现“以编程方式”选择标记的所有尝试都做了一些突出显示它的版本。只需提供一些有关在单击标记时在哪里查找正在启动的事件的方向将很有帮助。

    最佳答案

    我没有得出完整的答案,但我想分享我的经验,以防其他人遇到这个问题并感到卡住。通过浏览 Flutter Github/在论坛中询问,我能够获得三个关键要点:

  • 据我所知,Flutter 中没有办法模拟标记的“敲击”。我试着看 the Kotlin/Swift APIs for platform channels我自己编写了一些这样的功能,但老实说,它离我的驾驶室很远,我花了很多时间。这也可能导致必须与 Google 的好人一起通过审批流程才能接受我的更改,但现在不是我个人拥有的时间。
  • 我找到了一个名为 Maps Launcher 的包Craig 在评论部分也提到了这一点,它可以通过两种方法启动 Maps 应用程序 - 通过查询启动和通过纬度/经度启动。此功能实际上与您点击标记并选择右下角的两个 map 选项之一时获得的功能相同。
  • 我发现两者之间的主要区别
    当您点击标记时获得的图标是一个启动
    查询方向,另一个通过纬度和经度 - 只是
    就像 Maps Launcher 插件一样。

  • 因此,根据这三条信息,我重新设计了该应用程序,以从这里开始:
    Original Experience
    看起来像这样:
    New experience with MAP launcher
    现在是用户:
  • 从列表中选择一个位置。
  • 选择一个新位置会添加一个标记并显示该位置的信息窗口
  • 可以点击右侧的按钮导航到给定的位置。

  • 在我看来,这种体验要干净得多 - 在选择标记时,您可以启动的两个 map 选项(按查询与按纬度/经度)之间没有歧义,因为启动 map 图标的按钮现在位于 Listview 上.这还允许您只需在 ListView 中单击每个标记即可轻松导航到每个标记,然后通过按下右侧的按钮决定是否需要导航方向。
    将此添加到您的应用程序的代码非常简单:
    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 之旅中坚持框架 - 尽管存在一些早期障碍。

    关于flutter - 以编程方式选择标记以导航到位置 Google_Maps_Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67040228/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com