颤动如何从数据库中获取谷歌地图标记

Question

我制作了一个简单的应用程序来从数据库中获取标记并在 Google 地图上绘制它们。

我已从 API 获取标记信息，并将它们添加到名称为“allMarkers”的列表中。

但是当我运行我的应用程序时，地图无法运行并出现此错误。

type 'List<dynamic>' is not a subtype of type 'String'

如何在我的列表中插入名为“allMarkers”的标记并在谷歌地图上绘制它们

我的代码

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import 'package:google_maps_flutter/google_maps_flutter.dart';

class Home extends StatefulWidget {
  @override
  _Home2State createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Future _future;

  Future loadString() async {
    var url = "http://10.0.2.2/GoApp/locations.php";
    var response = await http.get(url);
    final dynamic responsebody = jsonDecode(response.body);
    //print(responsebody);
    return responsebody;
  }

  List<Marker> allMarkers = [];
  GoogleMapController _controller;

  @override
  void initState() {
    super.initState();
    _future = loadString();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: FutureBuilder(
            future: _future,
            builder: (context, AsyncSnapshot snapshot) {
              if (!snapshot.hasData) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
              List<dynamic> parsedJson = jsonDecode(snapshot.data);

              allMarkers = parsedJson.map((i) {
                return Marker(
                  markerId: MarkerId(i['loc_id']),
                  position: LatLng(i['loc_x'], i['loc_y']),
                );
              }).toList();

              return GoogleMap(
                initialCameraPosition: CameraPosition(
                    target: LatLng(40.7128, -74.0060), zoom: 1.0),
                markers: Set.from(allMarkers),
                onMapCreated: mapCreated,
                mapType: MapType.normal,
           

 tiltGesturesEnabled: true,
            compassEnabled: true,
            rotateGesturesEnabled: true,
            myLocationEnabled: true,
              );
            },
          ),
        ),
      ]),
    );
  }

  void mapCreated(controller) {
    setState(() {
      _controller = controller;
    });
  }
}

我来自 API 的 JSON 数据

[
 { 
   loc_id: "1", 
   loc_x: "40.7128", 
   loc_y: "-74.0060" 
 },
 { 
   loc_id: "2", 
   loc_x: "41.7128", 
   loc_y: "-75.0060" 
 }
]

Answer 1

为您从 API 接收的类型添加一个类，如下所示：

class Marker{
  final String locId;
  final String locX;
  final String locY;

  Marker();

  factory Marker.fromJson(Map<String, dynamic> json) {
    return Advertisement()
      ..locId = json['loc_id'] as int
      ..locX = json['loc_x'] as int
      ..locY = json['loc_y'] as int;
  }

  Map<String, dynamic> toJson(Marker instance) {
    return <String, dynamic>{
      'loc_id': instance.locId,
      'loc_x': instance.locX,
      'loc_y': instance.locY,
    };
  }
}

然后您可以解析响应以获得标记列表：

(parsedJson as List) ?.map((e) => e == null
      ? null
      : Marker.fromJson(e as Map<String, dynamic>))
    ?.toList();

Answer 2

我使用此代码返回模型列表Location

    Future<List<Location>> getLocations() async {
        try {
          final resp = await http.get(url);
    
          final locationResponse = locationResponseFromJson(resp.body);
          return locationResponse.location; //this return a list 
        } catch (e) {
          return [];
        }

  }

然后创建一个标记列表

List<Marker> allMarkers = [];

我们用Future的答案设置列表

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

我们设置列表的标记

GoogleMap(
          mapType: MapType.normal,
          initialCameraPosition: _kGooglePlex,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
                markers: Set<Marker>.of(allMarkers),
        ),