使用 InfoWindow 颤动图创建制造商

Question

除了问候您之外，我还想问您是否有人能够在颤振地图制造商中显示信息窗口，或者创建一个浮动的容器，以便它出现在制造商旁边，如果可能的话在谷歌地图中。

new Marker
                    (
                      width: 45.0,
                      height: 45.0,
                      point: new LatLng(-25.963678, -51.240657),
                      builder: (ctx) =>

                      new Container  //here infoWindow or Float Container
                      (
                        //child: new FlutterLogo(),
                          child: IconButton
                          (
                            icon: Icon(Icons.location_on),
                            color: Colors.blue,
                            iconSize: 45.0,
                            tooltip: "prueba",
                            onPressed: ()
                            {
                              print("test press");
                            },
                          )
                      ),
                    ),

非常感谢您一如既往的帮助。

Answer 1

您不能在任何颤振地图插件中将小部件设置为标记信息窗口。您只能在谷歌地图插件中设置信息窗口的标题和文本。

您可以关闭地图信息窗口，如果用户单击它，则将地图置于标记的中心，并添加一些代码以在屏幕的大致中心显示自定义对话框。您将不得不使用颤振 Stack 小部件。

Stack(
  children:[
    Map(
      markers: [Marker(/*no info-window*/, onTap: (){
        setState((){ _opacity = 1; });
      })],
      onMapMove: (){
        setState((){ _opacity = 0; });
      }
    ),
    Opacity(
      opacity: _opacity,
      child: /*custom info-window*/,
    ),
  ],
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
),

Answer 2

使用custom_info_window包如下：

第 1 步：初始化 CustomInfoWindowController。

CustomInfoWindowController _customInfoWindowController = CustomInfoWindowController();

第 2 步：从标记的 onTap 函数中调用 CustomInfoWindowController 的 addInfoWindow。

Marker(
    markerId: MarkerId("marker_id"),
    position: _latLng,
    onTap: () {
      _customInfoWindowController.addInfoWindow(
        <YOUR CUSTOM WIDGET>,
        _latLng,
      );
    },
  )

第 3 步：将 GoogleMap Widget 与 Stack 结合使用。

Stack(
    children: <Widget>[
      GoogleMap(
        onTap: (position) {
          _customInfoWindowController.hideInfoWindow();
        },
        onCameraMove: (position) {
          _customInfoWindowController.onCameraMove();
        },
        onMapCreated: (GoogleMapController controller) async {
          _customInfoWindowController.googleMapController = controller;
        },
        markers: _markers,
        initialCameraPosition: CameraPosition(
          target: _latLng,
          zoom: _zoom,
        ),
      ),
      CustomInfoWindow(
        controller: _customInfoWindowController,
        height: 75,
        width: 150,
        offset: 50,
      ),
    ],
  )

调用 _customInfoWindowController.hideInfoWindow();在 GoogleMap 的 onTap 内点击地图而不是标记时隐藏 CustomInfoWindow。

调用 _customInfoWindowController.onCameraMove();保持 CustomInfoWindow 相对于标记的位置。 [重要]

分配 _customInfoWindowController.googleMapController = 控制器；在 onMapCreated 里面。 [重要]

将 CustomInfoWindow 添加为下一个子窗口以将其浮动在 GoogleMap 顶部。