Я читаю главу 11 «Поваренной книги Флаттера» — второе издание Симоны Алессандрии. Я выполняю следующие шаги:
Создайте новое приложение Flutter и назовите его map_recipe.
flutter pub add google_maps_flutter
flutter pub add location
flutter pub add http
Я получил ключ Google Maps API здесь.
В файле манифеста Android, который вы можете найти по адресу android/app/src/main/AndroidManifest.xml
, добавьте следующий узел в узел Манифест (перед узлом приложения):
Но как это сделать для Интернета?
В приведенном ниже коде отображается заголовок Google Maps, но карта отсутствует.
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:http/http.dart' as http;
// API set up https://stackoverflow.com/questions/78675785/how-to-add-google-maps-api-to-flutter-web
/*One of the platform-independent plugins currently available is the flutter_map
plugin, available at https://pub.dev/packages/flutter_map.*/
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Map Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyMap(),
);
}
}
class MyMap extends StatefulWidget {
const MyMap({super.key});
@override
State<MyMap> createState() => _MyMapState();
}
class _MyMapState extends State<MyMap> {
late LatLng userPosition;
List<Marker> markers = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Google Maps'),
actions: [
IconButton(
icon: const Icon(Icons.map),
onPressed: () => findPlaces(),
)
],
),
body: FutureBuilder(
future: findUserLocation(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return GoogleMap(
initialCameraPosition:
CameraPosition(target: snapshot.data, zoom: 12),
markers: Set<Marker>.of(markers),
);
} else {
return Container();
}
}));
}
Future<LatLng> findUserLocation() async {
Location location = Location();
LocationData userLocation;
PermissionStatus hasPermission = await location.hasPermission();
bool active = await location.serviceEnabled();
if (hasPermission == PermissionStatus.granted && active) {
userLocation = await location.getLocation();
userPosition = LatLng(userLocation.latitude!, userLocation.longitude!);
} else {
userPosition = const LatLng(51.5285582, -0.24167);
}
return userPosition;
}
Future findPlaces() async {
const key = 'wxrhaENo';
const placesUrl =
'https://maps.googleapis.com/maps/api/place/nearbysearch/json?';
String url = placesUrl +
'key=$key&type=restaurant&location=${userPosition.latitude},${userPosition.longitude}' +
'&radius=1000';
final response = await http.get(Uri.parse(url));
if (response.statusCode == 200) {
final data = json.decode(response.body);
showMarkers(data);
} else {
throw Exception('Unable to retrieve places');
}
}
showMarkers(data) {
List places = data['results'];
markers.clear();
for (var place in places) {
markers.add(Marker(
markerId: MarkerId(place['reference']),
position: LatLng(place['geometry']['location']['lat'],
place['geometry']['location']['lng']),
infoWindow:
InfoWindow(title: place['name'], snippet: place['vicinity'])));
}
setState(() {
markers = markers;
});
}
}
Полный код можно найти на сайте автора GitHub.
Пожалуйста, ознакомьтесь с веб-документацией google_maps_flutter, она доступна там.
Вам нужно будет изменить файл web/index.html вашего веб-приложения Flutter, включив в него Google Maps JS SDK. Проверь это: google_maps_flutter_web
Вам не нужно добавлять эту зависимость в ваш pubspec.yaml, но следуйте его документации. Это поможет вам. Измените тег вашего web/index.html, чтобы загрузить API JavaScript Карт Google, например:
<head>
<!-- // Other stuff -->
<script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
Я надеюсь, что это поможет, и всякий раз, когда вы попытаетесь что-то реализовать. Каждый раз просматривайте документацию.
Название вашего вопроса не объясняет вашу проблему. API Google Map не работает с Flutter - ЧТО не работает с Flutter? И если проблема в вашем коде, зачем нам идти и загружать полный код с GitHub оригинального автора? Это не то же самое, что ваш код — вы, видимо, внесли в него изменения.