質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

1回答

951閲覧

FlutterとDartとGoogleMapのAPIで地点Aと地点Bの経路を示したいがデバッグ時にエラーを吐いてしまう

C2105

総合スコア1

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2023/06/08 06:14

編集2023/06/09 02:49

実現したいこと

地点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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

提示されたコードの一部を以下の様に変更したらどうでしょう。

ルート探索は、サーチアイコンのタップ時に処理し、探索終了後Widgetの再更新をするようにしています。
awaitを使わず、thenで非同期処理の結果でpolylineを更新して、完了後再描画するといった感じです。

initState内でルート探索を非同期で行うと、ウィジェットビルド前に何か処理を行おうとして問題となったのかな?
Chromeで試したのですが、ChromeProxyServiceのエラーが出なかったので、以下の対応も、想像での対応になってしまいますが。

dart

1 void _onMapCreated(GoogleMapController controller) { 2 mapController = controller; 3 } 4 5 //経路の配列を受け取って経路の設定をするメソッド 6 void GetRoutes() { 7 PolylinePoints polylinePoints = PolylinePoints(); 8 polylinePoints 9 .getRouteBetweenCoordinates( 10 API_KYE, 11 PointLatLng(start.latitude, start.longitude), 12 PointLatLng(destination.latitude, destination.longitude), 13 ) 14 .then((result) { 15 List<LatLng> polylineCoordinates = []; 16 if (result.points.isNotEmpty) { 17 result.points.forEach((PointLatLng point) { 18 polylineCoordinates.add(LatLng(point.latitude, point.longitude)); 19 }); 20 setState(() { 21 polyline.add(Polyline( 22 polylineId: const PolylineId("Route"), 23 visible: true, 24 color: Colors.blue, 25 width: 5, 26 points: polylineCoordinates)); 27 }); 28 } 29 }); 30 } 31 32 //マップの表示を切り替えるためのウィジェット 33 void CreateMap() { 34 isVisiblePolyline = !isVisiblePolyline; 35 GetRoutes(); 36 } 37 38 bool isVisiblePolyline = false; 39 40 //身体の部分(読み込みするとこ) 41 42 Widget build(BuildContext context) { 43 return MaterialApp( 44 theme: ThemeData( 45 useMaterial3: true, 46 colorSchemeSeed: Colors.green[700], 47 ), 48 home: Scaffold( 49 appBar: AppBar( 50 title: const Text('Maps Sample App'), 51 elevation: 2, 52 ), 53 body: Stack( 54 children: <Widget>[ 55 GoogleMap( 56 onMapCreated: _onMapCreated, 57 initialCameraPosition: CameraPosition( 58 target: _center, 59 zoom: 18.0, 60 ), 61 polylines: isVisiblePolyline ? polyline : const <Polyline>{}, 62 myLocationEnabled: true, 63 markers: isVisiblePolyline 64 ? { 65 Marker( 66 markerId: const MarkerId("origin"), 67 position: start), 68 Marker( 69 markerId: const MarkerId("destination"), 70 position: destination) 71 } 72 : { 73 const Marker( 74 markerId: (MarkerId('marker1')), 75 position: 76 LatLng(34.663694401896244, 135.5185330148645)) 77 }, 78 ),

タップ後にエラーが出ると仮定してです。
もしエラーが出た操作方法が違うのであれば、どういった状況でエラーが出たかも書いて下さい。
例えば起動直後とかどうかとか。

_MyAppStatebool isVisiblePolyline = false;を設ける。

buildの中のGoogleMapはこんな感じ。

dart

1 GoogleMap( 2 onMapCreated: _onMapCreated, 3 initialCameraPosition: CameraPosition( 4 target: _center, 5 zoom: 18.0, 6 ), 7 polylines: isVisiblePolyline ? polyline : const <Polyline>{}, 8 myLocationEnabled: true, 9 markers: isVisiblePolyline 10 ? { 11 Marker( 12 markerId: const MarkerId("origin"), 13 position: start), 14 Marker( 15 markerId: const MarkerId("destination"), 16 position: destination) 17 } 18 : { 19 Marker( 20 markerId: (MarkerId('marker1')), 21 position: 22 LatLng(34.663694401896244, 135.5185330148645)) 23 },

tap処理はこんな感じ。

dart

1 onTap: () { 2 setState(() { 3 isVisiblePolyline = true; 4 }); 5 },

私の環境では、ルートが求められず連続線を求められずとりあえずstart-destinationの線を作って表示しましたが、エラーは出ませんでした。

後はGetRoutes内のsetStateでの更新要求メソッドはいらないかもしれない。
ポリラインを表示するのはタップ後だから。
ポリライン計算前にタップするというケースがあれば必要かもだけど、たぶんないと思うので。

  • 問題と思われるところ
    タップで単独のウィジェットを作ろうとしたところなのかな。

    タップでGoogleMapに渡す引数を変更する場合は、提示されたように単独でウィジェットを作成するようなメソッドを呼ぶのではなく、buildの中のGoogleMapへ渡す引数を変化させる必要があります。

投稿2023/06/09 02:31

編集2023/06/09 04:53
ta.fu

総合スコア1703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

C2105

2023/06/09 02:48

回答ありがとうございます。とっても嬉しいです。 エラーの出るタイミングの件、言葉足らずで申し訳ありません。 エラーは起動直後に出てしまいます。 質問文を修正しておきます。 ta.fu様が使ってるのはたぶん三項演算子ですよね(間違えてたらすみません) 最近覚えたことだというのに頭から抜け落ちていました。新たな発想をありがとうございます。 しかし試してみたところ、やはりエラーが出てしまいました。 私の言葉足らずが原因なのでとても申し訳ないです。
C2105

2023/06/12 02:42

返信が遅れてしまい申し訳ありません。 丁寧に説明も添えていただけてとてもありがたいです。 ありがとうございます。 ta.fu様のコードを試してみたのですが、やはりエラーが出てしまいました。 しかし出る場所が ``` Future<void> _getRoutes() async { PolylinePoints polylinePoints = PolylinePoints();   //この下の行が強調表示される polylinePoints .getRouteBetweenCoordinates( API_KYE, PointLatLng(start.latitude, start.longitude), PointLatLng(destination.latitude, destination.longitude)) .then((result) { ``` に変わりました。 これはもう無理なのでしょうか…
ta.fu

2023/06/12 06:10

さすがにどんなエラーが出ているのか不明なので、答えようがないです。 回答を求めたいのであれば、情報は正しく出してください。 エラーがあります。動きません。強調表示される。というだけでは、何の情報にもなっていません。
C2105

2023/06/14 02:52

ta.fu様、申し訳ございません。また言葉足らずになってしまいました。 エラーの内容は今まで出ていたものと同じで ``` ChromeProxyService: Failed to evaluate expression 'polylinePoints': InternalError: Expression evaluation in async frames is not supported. No frame with index 77.. ``` です。
ta.fu

2023/06/14 06:54

私の方では特に問題ないので、実行環境のせいかな。 https://github.com/flutter/flutter/issues/121798 上の奥の方で --web-renderer html にするとうまくいったという報告がありました。 キャンバスキットのローディングが阻害されていたためだそうです。 あとはバージョン依存か。 私はFlutterの3.10.0を使ってます。 これで改善が無いようであれば、私ではお手上げですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問