在 Google 个地图中添加标记 - Flutter

Question

我需要在我的应用程序中创建一些标记，我通过 API 获取纬度和经度。我怎样才能显示这些标记？

我的 getPosts 代码：

Future<List<Orders>> getPosts() async {
Response response = await http.get(url);
//print(response.body);
if(response.statusCode == 200){
  List<dynamic> body = jsonDecode(response.body);
  List<Orders> orders = body.map((dynamic item) => Orders.fromJson(item)).toList();
  return orders;
} else {
  throw "Can't get orders";
}

我的class订单：

class Orders {

final String id;
final String nameRestaurant;
final String address;
final String lat;
final String long;
final bool delivered;
final String orderId;
final String phone;

Orders({@required this.id, @required this.nameRestaurant, @required this.address, @required this.lat,
  @required this.long, @required this.delivered, @required this.orderId, @required this.phone});

factory Orders.fromJson(Map<dynamic, dynamic> json){
  return Orders(
    id: json['id'] as String,
    nameRestaurant: json['nameRestaurant'] as String,
    address: json['address'] as String,
    lat: json['lat'] as String,
    long: json['long'] as String,
    delivered: json['delivered'] as bool,
    orderId: json['orderId'] as String,
    phone: json['phone'] as String
  );
 }
}

我遵循了一些教程，但所有教程都在 onTap 函数中添加了标记，但它对我不起作用

Answer 1

要添加简单标记列表，首先创建一个标记列表：

List<Marker> _markers = <Marker>[];

然后将标记添加到此列表：

    _markers.add(
      Marker(
      markerId: MarkerId('SomeId'),
      position: LatLng(38.123,35.123),
      infoWindow: InfoWindow(
      title: 'The title of the marker'
      )
     )
   );

请考虑在 infoWindow 中您还可以添加字幕和其他内容。最后添加 google 地图小部件：

GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(38.9647,35.2233),
        zoom: 9.0,
      ),
      mapType: MapType.normal,
      markers: Set<Marker>.of(_markers),
      onMapCreated: (GoogleMapController controller) {
        _controller.complete(controller);
      },
    )

Answer 2

首先创建一个标记图如下：

  Map<MarkerId, Marker> markers = <MarkerId, Marker>{MarkerId('marker_id_1'):Marker(
markerId: MarkerId('marker_id_1'),
position: LatLng(30.0444, 31.235),
infoWindow: InfoWindow(title: 'marker_id_1', snippet: '*'),
onTap: () {
  //_onMarkerTapped(markerId);
  print('Marker Tapped');
},
onDragEnd: (LatLng position) {
  print('Drag Ended');
},  )};

然后按如下所示将 googleMap 添加到任何你想要的地方

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

在 Google 个地图中添加标记 - Flutter

Add marker in Google Maps - Flutter

google-maps

google-maps-markers

flutter