Google Maps ist eine von Google angebotene Web-Mapping-Plattform und Verbraucheranwendung. Es handelt sich im Wesentlichen um eine digitale Weltkarte, die Ihnen eine Vielzahl von Funktionen zum Erkunden und Navigieren in Ihrer Umgebung bietet.
In diesem Tutorial erfahren Sie, wie Sie in Flutter eine Ortsauswahl mit automatischer Vervollständigung der Ortssuche und eine Koordinatenauswahl mit Drag-and-Drop-Karte auf der Google-Karte erstellen.
Bevor Sie mit diesem Tutorial beginnen, müssen Sie Google Maps korrekt in Ihr Projekt integrieren:
Fügen Sie nun diese Pakete zu Ihrem Projekt hinzu, indem Sie die folgenden Zeilen in die Datei pubspec.yaml einfügen:
dependencies:
flutter:
sdk: flutter
flutter_google_places_hoc081098: ^1.0.0-nullsafety.5
google_api_headers: ^1.1.1
google_maps_webservice: ^0.0.20-nullsafety.5
geocoding: ^2.0.1
google_maps_flutter: ^2.1.1
Indizieren Sie nun den Asset-Ordner, in dem Sie das Koordinatenauswahlbild abgelegt haben, wie unten in der Datei pubspce.yaml:
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/
Aktivieren Sie diese APIs in der Google Map Console:
Sehen Sie sich nun das Beispiel unten für die vollständige Ortsauswahl von Google Map in der Flutter-App an.
import 'package:flutter/material.dart';
import 'package:flutter_google_places_hoc081098/flutter_google_places_hoc081098.dart';
import 'package:geocoding/geocoding.dart';
import 'package:google_api_headers/google_api_headers.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_webservice/places.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
String googleApikey = "GOOGLE_MAP_API_KEY";
GoogleMapController? mapController; //contrller for Google map
CameraPosition? cameraPosition;
LatLng startLocation = LatLng(27.6602292, 85.308027);
String location = "Search Location";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Place Picker in Google Map"),
backgroundColor: Colors.deepPurpleAccent,
),
body: Stack(
children:[
GoogleMap( //Map widget from google_maps_flutter package
zoomGesturesEnabled: true, //enable Zoom in, out on map
initialCameraPosition: CameraPosition( //innital position in map
target: startLocation, //initial position
zoom: 14.0, //initial zoom level
),
mapType: MapType.normal, //map type
onMapCreated: (controller) { //method called when map is created
setState(() {
mapController = controller;
});
},
onCameraMove: (CameraPosition cameraPositiona) {
cameraPosition = cameraPositiona;
},
onCameraIdle: () async {
List<Placemark> placemarks = await placemarkFromCoordinates(cameraPosition!.target.latitude, cameraPosition!.target.longitude);
setState(() {
location = placemarks.first.administrativeArea.toString() + ", " + placemarks.first.street.toString();
});
},
),
Center( //picker image on google map
child: Image.asset("assets/images/picker.png", width: 80,),
),
//search autoconplete input
Positioned( //search input bar
top:10,
child: InkWell(
onTap: () async {
var place = await PlacesAutocomplete.show(
context: context,
apiKey: googleApikey,
mode: Mode.overlay,
types: [],
strictbounds: false,
components: [Component(Component.country, 'np')],
//google_map_webservice package
onError: (err){
print(err);
}
);
if(place != null){
setState(() {
location = place.description.toString();
});
//form google_maps_webservice package
final plist = GoogleMapsPlaces(apiKey:googleApikey,
apiHeaders: await GoogleApiHeaders().getHeaders(),
//from google_api_headers package
);
String placeid = place.placeId ?? "0";
final detail = await plist.getDetailsByPlaceId(placeid);
final geometry = detail.result.geometry!;
final lat = geometry.location.lat;
final lang = geometry.location.lng;
var newlatlang = LatLng(lat, lang);
//move map camera to selected place with animation
mapController?.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(target: newlatlang, zoom: 17)));
}
},
child:Padding(
padding: EdgeInsets.all(15),
child: Card(
child: Container(
padding: EdgeInsets.all(0),
width: MediaQuery.of(context).size.width - 40,
child: ListTile(
leading: Image.asset("assets/images/picker.png", width: 25,),
title:Text(location, style: TextStyle(fontSize: 18),),
trailing: Icon(Icons.search),
dense: true,
)
),
),
)
)
)
]
)
);
}
}
Auf diese Weise können Sie eine Ortsauswahl mit automatischer Vervollständigung der Palastsuche oder mit der Drag-and-Drop-Koordinatenauswahl aus Google Map in der Flutter-App erstellen.