时间戳

首页 > 解决方案 > flutter 如何从 API 获取标记并在地图上显示

flutter - flutter 如何从 API 获取标记并在地图上显示

问题描述

我在 Flutter 中制作了一个简单的应用程序，以从 API 获取标记并在 Google Map 上绘制它们。

我用位置名称制作了一个模型，我从 API 中获取了标记信息并将它们添加到标记列表中。

但是当我运行我的应用程序时，地图上没有显示任何标记。

我怎么解决这个问题？

我的函数从 API 获取标记：

Future<List<Location>> getLocations() async {
    try {
      var url = 'http://10.0.2.2/Track_App/locations.php';
      final resp = await http.get(url);
      final responsebody = jsonDecode(resp.body);
      return responsebody; //this return a list
    } catch (e) {
      return [];
    }
  }

  List<Marker> allMarkers = [];

  loadLocations() async {
    List<Location> locations;
    locations = [];
    locations = await getLocations(); //we store the response in a list
    for (var i = 0; i < locations.length; i++) {
      LatLng latlng;
      latlng = LatLng(
        double.parse(locations[i].locX),
        double.parse(locations[i].locY),
      );
      allMarkers.add(
        Marker(
          markerId: MarkerId(locations[i].locId.toString()),
          position: latlng,
        ),
      );
    }
    setState(() {});
  }

谷歌地图代码：

FutureBuilder(
              future: loadLocations(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                return GoogleMap(
                  mapType: MapType.normal,
                  initialCameraPosition: _kGooglePlex,
                  markers: snapshot.data,
                );
              },
            ),

来自 API 的 JSON 数据：

[
 {
  loc_id: "1 ",
  loc_x: "15.392567",
  loc_y: "44.278188"
 },
 {
  loc_id: "2 ",
  loc_x: "15.391717",
  loc_y: "44.278019"
 }
]

我的模型：

class Location {
  Location({
    this.locId,
    this.locX,
    this.locY,
    this.locInfo,
    this.locSpd,
    this.locDate,
  });
  String locId;
  String locX;
  String locY;
  String locInfo;
  String locSpd;
  String locDate;
  factory Location.fromJson(Map<String, dynamic> json) => Location(
        locId: json['loc_id'],
        locX: json['loc_x'],
        locY: json['loc_y'],
        locInfo: json['loc_info'],
        locSpd: json['loc_spd'],
        locDate: json['loc_date'],
      );
  Map<String, dynamic> toJson() => {
        'loc_id': locId,
        'loc_x': locX,
        'loc_y': locY,
        'loc_info': locInfo,
        'loc_spd': locSpd,
        'loc_date': locDate,
      };
}

标签： fluttergoogle-maps

解决方案

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

无论何时，您想在此处添加制造商，创建一个新的标记并添加到状态

Marker marker = Marker(...)
setState(() {
      markers[markerId] = marker;
});

你的构建功能就是这样

child: GoogleMap(
    onMapCreated: _onMapCreated,
    initialCameraPosition: const CameraPosition(
        target: LatLng(-33.852, 151.211),
        zoom: 11.0,
    ),
    markers: Set<Marker>.of(markers.values),
),

推荐阅读