如何从我的数据库中添加许多Google地图标记?

时间:2020-02-18 18:24:59

标签: flutter dart

我有laravel API LAT和LNG,我想在地图上显示所有标记。我试着做一个红色的循环,但只显示一个标记。我该如何解决?


var lat ;
var lng ;

var mylist ;
  Future<List<Post>> getData() async {
    // start get post     
      http.Response response = await http.get(
          " mysite.com/api/getall",
          headers: {"Accept": "application/json"},);
      List collection = json.decode(response.body);
       mylist = collection.map((json) => Post.fromJson(json)).toList();
     for(var i in mylist){ 
        lat = i.lat ;
        lng = i.lng ;
      }  
  } // end getData
///////////////////////////

                  FlutterMap(                      
                        options: new MapOptions(                          
                          center: new LatLng(lat, lng),
                          zoom: 12.0,
                        ),
                        layers: [
                          new TileLayerOptions(
                              urlTemplate:
                                  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                              subdomains: ['a', 'b', 'c']),
                          new MarkerLayerOptions(markers: [
                            new Marker(
                                width: 45.0,
                                height: 45.0,
                                point: new LatLng(lat, lng),
                                builder: (context) => new Container(
                                      child: IconButton(
                                        icon: Icon(Icons.location_on),
                                        color: Colors.red,
                                        iconSize: 45.0,
                                        onPressed: () {
                                          print('Marker tapped');
                                        },
                                      ),


1 个答案:

答案 0 :(得分:0)

实际上,您可以在[nzExtra]="null"中传递标记列表。目前,列表中只有一个标记,因此这就是为什么只看到一个标记的原因。

所以您基本上会这样做(未经测试,您可能需要稍微调整语法...)

MarkerLayerOptions

如上所述,不要指望代码开箱即用,只是在这里,以说明一般思想。