実現したいこと
地点Aから地点Bへの経路を表示させたいのですが、うまくいきません。
前提
FlutterとDart、GoogleMapのAPIでマップのアプリを作成しています。
地図を表示させるまではうまく行けたのですが、地点Aから地点Bの経路を表示することがうまくできません。
コードのエラーは出ていないのですが、Flutter(Chrome)でデバッグを始めると起動時にエラーメッセージを吐いて止まってしまいます(下部参照)。
勉強したてで分からないことが多く、どなたかのお手をお借りしたいです。
発生している問題・エラーメッセージ
ChromeProxyService: Failed to evaluate expression 'polylinePoints': InternalError: Expression evaluation in async frames is not supported. No frame with index 77..
該当のソースコード
Dart
1//インポート 2import 'package:flutter/material.dart'; 3import 'package:flutter_polyline_points/flutter_polyline_points.dart'; 4import 'package:geolocator/geolocator.dart'; 5import 'package:google_maps_flutter/google_maps_flutter.dart'; 6 7//メイン 8void main() async { 9 WidgetsFlutterBinding.ensureInitialized(); 10 11 Future( 12 () async { 13 LocationPermission permission = await Geolocator.checkPermission(); 14 if (permission == LocationPermission.denied) { 15 await Geolocator.requestPermission(); 16 } 17 }, 18 ); 19 runApp(const MyApp()); 20} 21 22//ロードさせる 23class MyApp extends StatefulWidget { 24 const MyApp({Key? key}) : super(key: key); 25 26 27 _MyAppState createState() => _MyAppState(); 28} 29 30//基本 31class _MyAppState extends State<MyApp> { 32 static const String API_KYE = "私のGoogleMapのAPIキー"; 33 34 late GoogleMapController mapController; 35 36 final Set<Polyline> polyline = {}; 37 38 final LatLng _center = const LatLng(34.720880534338605, 135.52205329786585); 39 40 final LatLng start = const LatLng(34.70341664798789, 135.497613088314); 41 final LatLng destination = const LatLng(34.73306557979083, 135.5571219134344); 42 43 void _onMapCreated(GoogleMapController controller) { 44 mapController = controller; 45 } 46 47 48 void initState() { 49 super.initState(); 50 GetRoutes(); 51 } 52 53 //経路の配列を受け取って経路の設定をするメソッド 54 Future<void> GetRoutes() async { 55 List<LatLng> points = await CreatePolyline(); 56 setState(() { 57 polyline.add(Polyline( 58 polylineId: const PolylineId("Route"), 59 visible: true, 60 color: Colors.blue, 61 width: 5, 62 points: points)); 63 }); 64 } 65 66 //経路の配列を返すメソッド 67 Future<List<LatLng>> CreatePolyline() async { 68 List<LatLng> polylineCoordinates = []; 69 PolylinePoints polylinePoints = PolylinePoints(); 70 // 71 // 72 //下の行がエラーを吐いたとき黄色い線が引かれる 73 // 74 // 75 PolylineResult result = await polylinePoints.getRouteBetweenCoordinates( 76 API_KYE, 77 PointLatLng(start.latitude, start.longitude), 78 PointLatLng(destination.latitude, destination.longitude), 79 ); 80 81 if (result.points.isNotEmpty) { 82 result.points.forEach((PointLatLng point) { 83 polylineCoordinates.add(LatLng(point.latitude, point.longitude)); 84 }); 85 } 86 87 return polylineCoordinates; 88 } 89 90 //マップの表示を切り替えるためのウィジェット 91 Widget CreateMap() { 92 return GoogleMap( 93 mapType: MapType.normal, 94 onMapCreated: _onMapCreated, 95 initialCameraPosition: CameraPosition(target: _center, zoom: 8), 96 polylines: polyline, 97 markers: { 98 Marker(markerId: const MarkerId("origin"), position: start), 99 Marker(markerId: const MarkerId("destination"), position: destination) 100 }, 101 ); 102 } 103 104 //身体の部分(読み込みするとこ) 105 106 Widget build(BuildContext context) { 107 return MaterialApp( 108 theme: ThemeData( 109 useMaterial3: true, 110 colorSchemeSeed: Colors.green[700], 111 ), 112 home: Scaffold( 113 appBar: AppBar( 114 title: const Text('Maps Sample App'), 115 elevation: 2, 116 ), 117 body: Stack( 118 children: <Widget>[ 119 GoogleMap( 120 onMapCreated: _onMapCreated, 121 initialCameraPosition: CameraPosition( 122 target: _center, 123 zoom: 18.0, 124 ), 125 myLocationEnabled: true, 126 markers: { 127 Marker( 128 markerId: (MarkerId('marker1')), 129 position: LatLng(34.663694401896244, 135.5185330148645)) 130 }, 131 ), 132 SafeArea( 133 child: Align( 134 alignment: Alignment.centerRight, 135 child: Padding( 136 padding: const EdgeInsets.only(right: 10.0, bottom: 100.0), 137 child: Column( 138 mainAxisAlignment: MainAxisAlignment.end, 139 children: <Widget>[ 140 ClipOval( 141 child: Material( 142 color: Colors.green.shade100, 143 child: InkWell( 144 splashColor: Colors.green, 145 child: SizedBox( 146 width: 50, 147 height: 50, 148 child: Icon(Icons.add), 149 ), 150 onTap: () { 151 mapController.animateCamera( 152 CameraUpdate.zoomIn(), 153 ); 154 }, 155 ), 156 ), 157 ), 158 SizedBox(height: 20), 159 ClipOval( 160 child: Material( 161 color: Colors.green.shade100, 162 child: InkWell( 163 splashColor: Colors.green, 164 child: SizedBox( 165 width: 50, 166 height: 50, 167 child: Icon(Icons.remove), 168 ), 169 onTap: () { 170 mapController 171 .animateCamera(CameraUpdate.zoomOut()); 172 }, 173 ), 174 ), 175 ), 176 SizedBox(height: 20), 177 ClipOval( 178 child: Material( 179 color: Colors.green.shade100, 180 child: InkWell( 181 splashColor: Colors.green, 182 child: SizedBox( 183 width: 50, 184 height: 50, 185 child: Icon(Icons.search), 186 ), 187 onTap: () { 188 setState(() { 189 CreateMap(); 190 }); 191 }, 192 ), 193 ), 194 ) 195 ], 196 ), 197 ), 198 )) 199 ], 200 )), 201 ); 202 } 203} 204
依存関係
dependencies: flutter: sdk: flutter google_maps_flutter: ^2.2.8 google_maps_flutter_web: ^0.5.0 flutter_polyline_points: ^1.0.0 geolocator:
試したこと
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates( API_KYE, PointLatLng(start.latitude, start.longitude), PointLatLng(destination.latitude, destination.longitude), );
のawaitを消してみましたが、別のエラーが発生してしまいました。(以下エラー)
A value of type 'Future<PolylineResult>' can't be assigned to a variable of type 'PolylineResult'. Try changing the type of the variable, or casting the right-hand type to 'PolylineResult'.
また、海外の質問サイト(https://github.com/flutter/flutter/issues/121798 )でメイン関数からasyncを削除することで動く、とあったので試してみましたが、変わらず同じエラーが出てしまいました。
補足情報(FW/ツールのバージョンなど)
作成環境はVSCodeです。
作成時に参考にしたサイト様
https://isub.co.jp/flutter/flutter-map-app-googlemap-4/
https://note.com/_hi/n/ncdcaf17a8270

下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/06/09 02:48
2023/06/12 02:42
2023/06/12 06:10
2023/06/14 02:52
2023/06/14 06:54