【问题标题】:Adding markers dynamically to flutter google map动态添加标记以颤动谷歌地图
【发布时间】:2019-09-23 01:28:31
【问题描述】:

我正在使用 Flutter 制作一个使用地图的移动应用程序。我们决定使用谷歌地图,我们使用的颤振插件是:

google_maps_flutter:^0.5.7

我了解向地图添加标记的工作方式如下:

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
Marker _marker = new Marker(
  icon: BitmapDescriptor.defaultMarker,
  markerId: _markerId,
  position: LatLng(34.024441,-5.0310968),
  infoWindow: InfoWindow(title: "userMarker", snippet: '*'),
);
GoogleMap _map;

@override
void initState(
   markers[_markerId] = _marker;
   _map = new GoogleMap(
    /* other properties irrelevant to this prob */
    markers: Set<Marker>.of(_markers.values),
  );
);

上面的 sn-p 确实有效,我可以在地图上看到标记。但是修改标记或尝试像下面的 sn-p 那样添加另一个标记不起作用。

FloatingActionButton(
    onPressed: () {
      setState(() {
        _marker = new Marker(
            icon: BitmapDescriptor.defaultMarker,
            markerId: _markerId,
            position: LatLng(currentLocation.latitude, currentLocation.longitude),
            infoWindow: InfoWindow(title: "userMarker", snippet: '*'),
            onTap: () {
              debugPrint("Marker Tapped");
            },
          );
        markers[_markerId] = _marker; // What I do here is modify the only marker in the Map.
      });
      markers.forEach((id,marker) { // This is used to see if the marker properties did change, and they did.
        debugPrint("MarkerId: $id");
        debugPrint("Marker: [${marker.position.latitude},${marker.position.longitude}]");
      });
    });
)

我的意图是使用另一个插件 (geoLocator) 来获取用户的位置数据并更改我拥有的唯一标记,以便它可以跟踪他的动作。 debugPrint 显示数据确实在发生变化,但我在地图中看不到任何变化(我更改的初始标记使用的位置与我测试时使用的位置不同)。

【问题讨论】:

  • 您在第一个代码 sn-p 中没有 _markers,但您在 Set.of(_markers.values) 行上使用,这让我认为您的问题可能与命名有关
  • 我只是错误地复制了错误的名称。我实际上将标记对象传递给我的自定义地图类构造函数,其中包含 _markers 属性。会不会是引用的问题?因为我将标记传递给构造函数,但我不知道 Dart 是如何引用对象的。

标签: google-maps flutter google-maps-markers


【解决方案1】:

如果你没有特别的理由使用 Map 数据结构,这就是我过去所做的。

我的State 中有Marker 中的Set

Set<Marker> markers = Set();

把它交给地图小部件。标记:标记

GoogleMap(
  onMapCreated: _onMapCreated,
  myLocationEnabled: true,
  initialCameraPosition:
    CameraPosition(target: LatLng(0.0, 0.0)),
  markers: markers,
)

然后在 setState 方法中将我正在使用搜索结果构建并且您将使用用户位置构建的标记添加到 Set of Marker。

// Create a new marker
Marker resultMarker = Marker(
  markerId: MarkerId(responseResult.name),
  infoWindow: InfoWindow(
  title: "${responseResult.name}",
  snippet: "${responseResult.types?.first}"),
  position: LatLng(responseResult.geometry.location.lat,
  responseResult.geometry.location.lng),
);
// Add it to Set
markers.add(resultMarker);

编辑:我刚刚注意到您在 initState 中使用 GoogleMap 小部件,如果您想每次都使用新的来重建它,则需要将其移至 build 方法状态值。

【讨论】:

  • 我正在使用地图,以便跟踪markerId。而你的方法正是我正在做的。它似乎没有更新地图。
  • 是的,因为 GoogleMap 在您的 initState 中,而不是在 build 方法中。每次状态改变时,有状态的小部件都会调用它们的 build 方法,而不是 initState 方法。
  • 你是对的,将其移至 build 方法是可行的。但据我了解,我只需要一个 GoogleMap 实例,这就是为什么我把它放在 initState 中,将它移到 build 方法意味着每次构建都会创建一个新实例。有更好的方法吗?
  • 这是 Flutter、React 和 React Native 中的做法。每次您的状态发生变化时,为了反映 ui 上的变化,框架都会为必要的部分安排构建。这些框架正在有效地完成它,您不必担心它。你不会最终得到数百个谷歌地图小部件和一个缓慢的应用程序。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-31
  • 2013-07-26
  • 2013-01-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多