从JSON文件获取和绘制GoogleMap标记

时间:2019-05-16 14:42:49

标签: google-maps flutter

我的简单应用程序,它从本地JSON文件获取标记信息并绘制它们。

看起来很清晰,但是我遇到了一个问题,它只是绘制地图,而不显示标记。

我已经参考了许多指南,并且已经应用​​但失败了。

我确定在assets: - assets/data.json上添加了pubspec.yaml

这是我的main.dart代码

class _MyHomePageState extends State<MyHomePage> {
  Future _future;
  List<Marker> allMarkers = [];
  Future<String> loadJson() async =>
      await rootBundle.loadString('assets/data.json');
  GoogleMapController _controller;
  @override
  void initState() {
    _future = loadJson();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: <Widget>[
          FutureBuilder(
              future: _future,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  for (var v in snapshot.data) {
                    allMarkers.add(Marker(
                      markerId: v['id'],
                      position: LatLng(v['x'], v['y']),
                    ));
                  }
                  return Text(snapshot.data);
                } else {
                  return CircularProgressIndicator();
                }
              }),
          GoogleMap(
            initialCameraPosition:
                CameraPosition(target: LatLng(40.7128, -74.0060), zoom: 12.0),
            markers: Set.from(allMarkers),
            onMapCreated: mapCreated,
          ),
        ],
      ),
    ));
  }

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

我的data.json

[{
    "rownum": 1,
    "id": "E3E0D2C5-CB82-4AF3-8D5D-4CD323560F59",
    "x": 40.7128, 
    "y": -74.0060,
  }, {
    "rownum": 2,
    "id": "5FFB6736-7D1F-4B40-A397-32EB3128BC30",
    "x": 41.7128, 
    "y": -71.0060,
  }]

0 个答案:

没有答案