[Flutter]GoogleMapの任意の場所にマーカーを置く
右上のボタンを押すと画面中央にマーカーが置かれる。
コードは以下の通り
import 'dart:async';
import 'package:myapp/utils/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
part 'mymap.freezed.dart';
// part 'mymap.g.dart';
class MyMapPage extends HookWidget {
MyMapPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
final mmsp = useProvider(myMapStateProvider);
final mmState = useProvider(myMapStateProvider.state);
useEffect(() {
mmsp.initState();
return () {};
}, []);
return Scaffold(
body: Stack(
children: [
GoogleMap(
mapType: MapType.normal,
initialCameraPosition:
CameraPosition(target: mmState.lastPosition, zoom: 8),
onMapCreated: mmsp.onMapCreated,
myLocationEnabled: true,
compassEnabled: true,
markers: mmState.markers,
onCameraMove: mmsp.onCameraMove,
),
Positioned(
top: 40,
right: 10,
child: FloatingActionButton(
onPressed: mmsp.addMarker,
tooltip: 'add marker',
backgroundColor: blue,
child: Icon(Icons.add_location, color: white),
))
],
),
);
}
}
@freezed
abstract class MyMapState with _$MyMapState {
const factory MyMapState({
LatLng initialPosition,
@Default(LatLng(35.68, 139.76)) LatLng lastPosition,
@Default({}) Set<Marker> markers,
}) = _MyMapState;
}
final myMapStateProvider = StateNotifierProvider((_) => MyMapStateProvider());
class MyMapStateProvider extends StateNotifier<MyMapState> {
MyMapStateProvider() : super(const MyMapState());
static const initialPosition = LatLng(35.68, 139.76);
Completer<GoogleMapController> googleMapController;
final Set<Marker> _markers = {};
void initState() {
googleMapController = Completer();
}
void onMapCreated(GoogleMapController controller) {
googleMapController.complete(controller);
}
void onCameraMove(CameraPosition position) {
state = state.copyWith(lastPosition: position.target);
}
void addMarker() {
_markers.add(Marker(
markerId: MarkerId(state.lastPosition.toString()),
position: state.lastPosition,
infoWindow: InfoWindow(title: 'Remember Here', snippet: 'good place'),
icon: BitmapDescriptor.defaultMarker));
state = state.copyWith(markers: _markers);
}
}
この記事が気に入ったらサポートをしてみませんか?