在 gmap flutter 中单击标记时如何显示小部件?

问题描述 投票:0回答:0

当标记放在地图上或单击标记时,我想显示一个带有经纬度信息和按钮的小部件。

这是我处理标记的代码

  Future<void> addMarker(
      LatLng mLatLng, String mTitle, String mDescription) async {
    final Uint8List markerIcon =
        await getBytesFromAsset('assets/images/icons/pin.png', 100);
    setState(() {
      _markers.clear();
      _markers.add(Marker(
        markerId:
            MarkerId((mTitle + "_" + _markers.length.toString()).toString()),
        position: mLatLng,
        infoWindow: InfoWindow(
          title: mTitle,
          snippet: mDescription,
        ),
        icon: BitmapDescriptor.fromBytes(
            markerIcon), //BitmapDescriptor.defaultMarker,
      ));
    });
  }

  Future<void> _handleTap(LatLng tappedPoint) async {
    print(tappedPoint);
    final words = await api
        .convertTo3wa(Coordinates(tappedPoint.latitude, tappedPoint.longitude))
        .language('en')
        .execute();
    print(words.data()!.words);
    LatLng mLatLng = tappedPoint;
    String mTitle = '///${words.data()!.words}';
    String mDescription =
        'Coordinates: ${words.data()!.coordinates.lat}, ${words.data()!.coordinates.lng},\nNearest Place: ${words.data()!.nearestPlace}';

    setState(() {
      _markers.clear();
      if (words.isSuccessful()) {
        addMarker(mLatLng, mTitle, mDescription);
        getPillInfowindow(mLatLng, mTitle, mDescription);
        //_customInfoWindowController.hideInfoWindow!();
      } else {
        print(words.error());
      }
    });
  }

点击标记时我想要显示的小部件是这个

import 'package:flutter/material.dart';
import 'package:mymapp/screens/home_page.dart';

    Widget getPillInfowindow(mLatLng, mTitle, mDescription) {
      return Positioned(
        bottom: 100, right: 0, left: 0,
        child: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            margin: EdgeInsets.all(20),
            height: 70,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(50)),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                      blurRadius: 20,
                      offset: Offset.zero,
                      color: Colors.grey.withOpacity(0.5))
                ]),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                    margin: EdgeInsets.only(left: 10),
                    width: 50,
                    height: 50,
                    child: ClipOval(
                        child: Image.asset('assets/images/icons/pin2.png',
                            fit: BoxFit.cover))),
                // first widget
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(left: 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text('title:${mTitle}', //${mTitle}',
                            style: TextStyle(
                                color: Colors
                                    .green)), //currentlySelectedPin.labelColor)),
                        Text(
                            'Latitude, Longitude: ${mLatLng}', 
                            style: TextStyle(fontSize: 12, color: Colors.grey)),
                        Text(
                            'Desc: ${mDescription}', // 
                            style: TextStyle(fontSize: 12, color: Colors.grey))
                      ], // end of Column Widgets
                    ), // end of Column
                  ),
                ), // second widget
    
              ],
            ),
          ),
        ),
      ); // end of Container
    }

但不知何故,这并没有按照我想要的方式工作。这里有什么问题吗?

如果这里有错误请见谅,我是flutter的初学者

flutter dart google-maps-markers google-maps-android-api-2
© www.soinside.com 2019 - 2024. All rights reserved.