Question

我正在创建一个附近的flutter应用，该应用可以显示您附近的餐厅。我已经找到附近的位置，但是无法在附近的坐标上添加标记。我想知道如何使用Google API向我的位置添加标记，以及如何将列表中的位置加载到我的地图上。

void getData() async {
    http.Response response = await http.get(
        'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=1500&type=restaurant&key=API_KEY');

    if (response.statusCode == 200) {
      String data = response.body;
      var decodedData = jsonDecode(data);
      print(decodedData);
      List<String> names = [];
      List<double> lat = [];
      List<double> lng = [];
      for (var i = 0; i < 10; i++) {
        names.add(decodedData['results'][i]['name']);
        lat.add(decodedData['results'][i]['geometry']['location']['lat']);
        lng.add(decodedData['results'][i]['geometry']['location']['lng']);
      }
      print(names);
      print(lat);
      print(lng);
    }
  }



Expanded(
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: GoogleMap(
                  initialCameraPosition: CameraPosition(
                    target: LatLng(-33.8670522, 151.1957362),
                    zoom: 14.4746,
                  ),
                  markers: Set<Marker>.of(markers.values),
                  onMapCreated: (GoogleMapController controller) {
                    _controller.complete(controller);
                  },
                ),
              ),
            ),

Answer 1

最后，您必须自己构建它，但它应该看起来像这样

  final Set<Marker> _markers = {};

  setState(() {
  // add marker on the position
  _markers.add(Marker(
  // This marker id can be anything that uniquely identifies each marker.
  markerId: MarkerId(_lastMapPosition.toString()),
  position: _lastMapPosition,
  infoWindow: InfoWindow(
  // title is the address
  title: address.addressLine,
  // snippet are the coordinates of the position
  snippet: 'Lat: ${address.coordinates.latitude}, Lng: ${address
      .coordinates.longitude}',
  ),
  icon: BitmapDescriptor.defaultMarker,
  ));
  }

Answer 2

确保您添加了API_KEY。以下是您要求的可行示例

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  LatLng latlng = LatLng(
    -33.8670522,
    151.1957362,
  );
  Iterable markers = [];

  @override
  void initState() {
    super.initState();

    getData();
  }

  getData() async {
    try {
      final response =
          await http.get('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=1500&type=restaurant&key=API_KEY');

      final int statusCode = response.statusCode;

      if (statusCode == 201 || statusCode == 200) {
        Map responseBody = json.decode(response.body);
        List results = responseBody["results"];

        Iterable _markers = Iterable.generate(10, (index) {
          Map result = results[index];
          Map location = result["geometry"]["location"];
          LatLng latLngMarker = LatLng(location["lat"], location["lng"]);

          return Marker(markerId: MarkerId("marker$index"),position: latLngMarker);
        });

        setState(() {
          markers = _markers;
        });
      } else {
        throw Exception('Error');
      }
    } catch(e) {
      print(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GoogleMap(
        markers: Set.from(
          markers,
        ),
        initialCameraPosition: CameraPosition(target: latlng, zoom: 15.0),
        mapType: MapType.hybrid,
        onMapCreated: (GoogleMapController controller) {},
      ),
    );
  }
}

Answer 3

Iterable markers = [];

// in GoogleMap use like this

GoogleMap(...
  markers: Set.from(markers),
),

// in function or where you want

Iterable _markers = Iterable.generate(list.length, (index) {
return Marker(
  markerId: MarkerId("marker$index"),
  position: list[index].position);
});
setState(() {
  markers = _markers;
});

如何使用Flutter在Google地图中添加标记？

3 个答案: