2
votes

Comment ajouter un marqueur dans la carte Google en utilisant le flutter?

Je crée une application Flutter à proximité qui montre le restaurant autour de votre position. J'ai trouvé l'emplacement à proximité, mais je n'ai pas pu ajouter de marqueurs sur les coordonnées à proximité.Je souhaite savoir comment ajouter des marqueurs à ma position à l'aide de l'API Google et comment charger l'emplacement de la liste sur ma carte.

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);
                  },
                ),
              ),
            ),

flutter google-maps google-maps-api-3

0 commentaires

3 Réponses :

0
votes

En fin de compte, vous devez le structurer vous-même, mais il devrait ressembler à quelque chose comme ceci

  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,
  ));
  }

0 commentaires

3
votes

Assurez-vous d'ajouter votre API_KEY . Un exemple concret de votre besoin suit

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) {},
      ),
    );
  }
}

2 commentaires

Fonctionne comme un charme, BTW J'ai un autre problème lié à la même application, donc si vous le souhaitez, allez-y s'il vous plaît. Merci d'avoir répondu.

Génial ! J'adore ce type de réponses :), propre et explicite

0
votes

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;
});

1 commentaires

Bien que ce code puisse résoudre la question, inclure une explication aide vraiment à améliorer le qualité de votre message. N'oubliez pas que vous répondez à la question des lecteurs à l'avenir et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.