同じマップに2つのマーカーを追加する方法をフラッター

ラミーズ・カーン

開始値と終了点のlat値とlong値を持つデータがあります。

このようなマーカーを表示しようとしています

class _TripRouteScreenState extends State<TripRouteScreen> {
  BitmapDescriptor pinLocationIcon;

  var start_currentPostion;
  var end_currentPostion;
  Map<MarkerId, Marker> markers =
      <MarkerId, Marker>{}; // CLASS MEMBER, MAP OF MARKS

  void setCustomMapPin() async {
    pinLocationIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5), 'images/pin.png');
  }

  @override
  void initState() {
    super.initState();
    setCustomMapPin();
    working();

  }

  working(){
    print(widget.data);

    double start_latitude = widget.data['start']['lat'].toDouble();
    double start_longitude = widget.data['start']['lon'].toDouble();

    double end_latitude = widget.data['end']['lat'].toDouble();
    double end_longitude = widget.data['end']['lon'].toDouble();

    start_currentPostion = LatLng(start_latitude, start_longitude); //this is the marker 1 location  which is already set and showing in map
    end_currentPostion = LatLng(end_latitude, end_longitude); // this is the marker 2 location which needs to be set and show marker on this value 

    print(start_currentPostion);
    print(end_currentPostion);
    var snip = widget.data["start"]["address"];
    final Map<String, Marker> _markers = {};

    setState(() {
      final MarkerId markerId = MarkerId('1');

      // creating a new MARKER
      final Marker marker = Marker(
        markerId: markerId,
        icon: pinLocationIcon,
        position: start_currentPostion,
        infoWindow: InfoWindow(title: 'Address',snippet: snip),
      );

      setState(() {
        // adding a new marker to map
        markers[markerId] = marker;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          leading: GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: Icon(Icons.arrow_back)),
          centerTitle: true,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/nav.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          backgroundColor: Colors.transparent,
          title: Text(
            'Route Location',
            style: TextStyle(fontFamily: 'UbuntuBold'),
          ),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 15),
              child: Icon(
                Icons.notifications_none,
                size: 33,
              ),
            )
          ]),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: start_currentPostion,
          zoom: 15,
        ),
        markers: Set<Marker>.of(markers.values), // YOUR MARKS IN MAP
      ),
    );
  }
}

問題は、マップにマーカーを追加できることですが、開始点のみです:D平均start_currentPostion終了点にもマーカーを追加する必要があります。これはend_currentPostionですが、どうすればよいかわかりません。チュートリアルやその他の回答から、最終的に1つのマーカーを追加できますが、2つ目のマーカーを追加する方法がわかりません。

Shubham narkhede

ここに画像の説明を入力してください

だから私はあなたのコードを試してみました、そして私はあなたのコードにいくつかの変更を加えました今これは実行されています。そこでまず、マーカーデータlistを保存するための空を作成しましたその後、2つのマーカーIDを作成し、そのIDをに追加し、マーカーIDを使用して別の場所で作成、このマーカーをに追加して、この値にGoogleマップにアクセスします。グーグルマップでルートを描くために、あなたは中程度の記事とこのGithubの投稿をチェックすることができますlist2 markerssetmarkers

class _TripRouteScreenState extends State<HomeScreen> {
  BitmapDescriptor pinLocationIcon;

  var start_currentPostion;
  var end_currentPostion;

  Map<MarkerId, Marker> setmarkers = {};
  List listMarkerIds = List();  // For store data of your markers 

  @override
  void initState() {
    super.initState();
    working();
  }

  working() {

    // You just need to pass dynamically your data

    double start_latitude = 19.965651;
    double start_longitude = 73.771683;

    double end_latitude = 19.997454;
    double end_longitude = 73.789803;

    start_currentPostion = LatLng(start_latitude, start_longitude);
    end_currentPostion = LatLng(end_latitude, end_longitude);


    setState(() {
      MarkerId markerId1 = MarkerId("1");
      MarkerId markerId2 = MarkerId("2");

      listMarkerIds.add(markerId1);
      listMarkerIds.add(markerId2);

      Marker marker1 = Marker(
        markerId: markerId1,
        position: LatLng(start_latitude, start_longitude),
        icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
      );

      Marker marker2 = Marker(
        markerId: markerId2,
        position: LatLng(end_latitude, end_longitude),
        icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),  // you can change the color of marker
      );

      setmarkers[markerId1] = marker1;  // I Just added here markers on the basis of marker id 
      setmarkers[markerId2] = marker2;

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          leading: GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: Icon(Icons.arrow_back)),
          centerTitle: true,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/nav.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          backgroundColor: Colors.transparent,
          title: Text(
            'Route Location',
            style: TextStyle(fontFamily: 'UbuntuBold'),
          ),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 15),
              child: Icon(
                Icons.notifications_none,
                size: 33,
              ),
            )
          ]),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: start_currentPostion,
          zoom: 15,
        ),
        markers: Set.of(setmarkers.values), // YOUR MARKS IN MAP
      ),
    );
  }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

リーフレット:2つの異なるマップに同じレイヤーを追加する

分類Dev

同じキーの場合に2つのマップの値を追加する

分類Dev

2つのGoogleマップマーカー間をフラッターでズームする方法

分類Dev

同じカラーバーに2つのサブプロットをマッピングする

分類Dev

Informatica:異なるスキーマの2つのソースを同じターゲット(フラットファイル)にロードする方法は?

分類Dev

マーカー クラスタラーを Google マップに追加する方法

分類Dev

Googleマップにマーカーを追加-フラッター

分類Dev

2つの異なる(neo)vimプラグインに同じキーマッピングを使用する方法

分類Dev

2つの異なるURIを同じコントローラーメソッドにマップする

分類Dev

マップの同じキーに複数の値を追加する方法

分類Dev

同じ画像に同じカーネルで2つの異なるフィーチャマップを取得したのはなぜですか?

分類Dev

OpenMapQuestのマップにマップマーカーを追加する方法

分類Dev

2つのマップから同じキーを削除する方法

分類Dev

AndroidのGoogleマップマーカーにカスタムフッターボタンを追加する

分類Dev

同じimshowmatplotlib内の2つの異なるカラーカラーマップ

分類Dev

フォリウム マップにカラーマップの背景色を追加する方法

分類Dev

2つのマップをマージし、同じキーの値を合計する最良の方法は?

分類Dev

フラッターグーグルマップに動的にマーカーを追加する

分類Dev

Mongodbを使用して、同じクエリ内にデータセットのサマリーヘッダー/フッターを追加する方法

分類Dev

辞書の2つのキーを同じ値にマップするデータフレーム列を作成します

分類Dev

Googleマップにマーカーを動的に追加する方法

分類Dev

2つのmatplotlibimshowプロットを同じカラーマップ縮尺になるように設定します

分類Dev

Python散布図:カラーサイクルと同じ色のカラーマップを使用する方法

分類Dev

マップのリストをカレンダーにフェッチする方法は?[フラッター]

分類Dev

Googleマップにマーカーを追加する方法

分類Dev

2つの異なるツリーマップで同じデータを含む2つのボックス間の関係を表示する方法

分類Dev

配列フラッターFirestore内にマップを追加する方法

分類Dev

マップ内の2つのマーカー間をズームする方法

分類Dev

すべてのページに同じメニュー/フッターを追加する関数/マクロ

Related 関連記事

  1. 1

    リーフレット:2つの異なるマップに同じレイヤーを追加する

  2. 2

    同じキーの場合に2つのマップの値を追加する

  3. 3

    2つのGoogleマップマーカー間をフラッターでズームする方法

  4. 4

    同じカラーバーに2つのサブプロットをマッピングする

  5. 5

    Informatica:異なるスキーマの2つのソースを同じターゲット(フラットファイル)にロードする方法は?

  6. 6

    マーカー クラスタラーを Google マップに追加する方法

  7. 7

    Googleマップにマーカーを追加-フラッター

  8. 8

    2つの異なる(neo)vimプラグインに同じキーマッピングを使用する方法

  9. 9

    2つの異なるURIを同じコントローラーメソッドにマップする

  10. 10

    マップの同じキーに複数の値を追加する方法

  11. 11

    同じ画像に同じカーネルで2つの異なるフィーチャマップを取得したのはなぜですか?

  12. 12

    OpenMapQuestのマップにマップマーカーを追加する方法

  13. 13

    2つのマップから同じキーを削除する方法

  14. 14

    AndroidのGoogleマップマーカーにカスタムフッターボタンを追加する

  15. 15

    同じimshowmatplotlib内の2つの異なるカラーカラーマップ

  16. 16

    フォリウム マップにカラーマップの背景色を追加する方法

  17. 17

    2つのマップをマージし、同じキーの値を合計する最良の方法は?

  18. 18

    フラッターグーグルマップに動的にマーカーを追加する

  19. 19

    Mongodbを使用して、同じクエリ内にデータセットのサマリーヘッダー/フッターを追加する方法

  20. 20

    辞書の2つのキーを同じ値にマップするデータフレーム列を作成します

  21. 21

    Googleマップにマーカーを動的に追加する方法

  22. 22

    2つのmatplotlibimshowプロットを同じカラーマップ縮尺になるように設定します

  23. 23

    Python散布図:カラーサイクルと同じ色のカラーマップを使用する方法

  24. 24

    マップのリストをカレンダーにフェッチする方法は?[フラッター]

  25. 25

    Googleマップにマーカーを追加する方法

  26. 26

    2つの異なるツリーマップで同じデータを含む2つのボックス間の関係を表示する方法

  27. 27

    配列フラッターFirestore内にマップを追加する方法

  28. 28

    マップ内の2つのマーカー間をズームする方法

  29. 29

    すべてのページに同じメニュー/フッターを追加する関数/マクロ

ホットタグ

アーカイブ