Flutter 谷歌地图缩放控件位置

Question

我使用google_maps_flutter包创建应用程序中的地图。我正在使用以下功能。

GoogleMap(
                        initialCameraPosition: CameraPosition(
                            target: _locationCoords, zoom: 12.0),
                        markers: Set.from(allMarkers),
                        onMapCreated: mapCreated,
                        zoomControlsEnabled: true,
                        zoomGesturesEnabled: true,
                        scrollGesturesEnabled: true,
                        compassEnabled: true,
                      )

问题出在缩放控件上。我能看到缩放控件出现了，但是我想把它们的位置改到右侧。是否可以更改缩放控件的位置。

- Bilal Rabbi

---

似乎在google_maps_flutter包中还没有更改缩放控件位置的选项。 - Nelson Jr.

Answer 1

我没有找到解决方案，所以我创建了定制的缩放控件，并使用地图控制器将它们添加到地图上。

Positioned(
      top: 100,
      left: 5,
      child: Card(
        elevation: 2,
        child: Container(
          color: Color(0xFFFAFAFA),
          width: 40,
          height: 100,
          child: Column(
            children: <Widget>[
              IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () async {
                    var currentZoomLevel = await _controller.getZoomLevel();

                    currentZoomLevel = currentZoomLevel + 2;
                    _controller.animateCamera(
                      CameraUpdate.newCameraPosition(
                        CameraPosition(
                          target: locationCoords,
                          zoom: currentZoomLevel,
                        ),
                      ),
                    );
                  }),
              SizedBox(height: 2),
              IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: () async {
                    var currentZoomLevel = await _controller.getZoomLevel();
                    currentZoomLevel = currentZoomLevel - 2;
                    if (currentZoomLevel < 0) currentZoomLevel = 0;
                    _controller.animateCamera(
                      CameraUpdate.newCameraPosition(
                        CameraPosition(
                          target: locationCoords,
                          zoom: currentZoomLevel,
                        ),
                      ),
                    );
                  }),
            ],
          ),
        ),
      ),
    );

- Bilal Rabbi

---

更一般的方法而不是动画到特定坐标：var currentZoomLevel = await myStore.mapController.getZoomLevel(); currentZoomLevel = currentZoomLevel + 2; myStore.mapController.animateCamera(CameraUpdate.zoomTo(currentZoomLevel)); - Anas Yousuf

当前的 locationCoords 可以在 provider.cameraPosition.target 中找到。非常好的解决方案，因为它也适用于 Google 没有支持的 iOS。 - Martin Braun

我使用了那个解决方案，它非常棒。但是我将它作为特例添加到了IOS中，因为这部分在Android上是可用的："zoomControlsEnabled:true"。 - Abdelrahman Mohamed Elakliby

@MartinBraun 这里的提供者是什么？我应该将提供者分配为什么？ - just10minutes

@just10minutes 我正在维护一个fork，这将会帮助你。不幸的是，我没有意识到PlaceProvider是我的代码库中的一个独立类，我真的以为它是由Google提供的。全文搜索_buildZoomButtons()并跟随定义和引用来学习如何有意义地组合在一起。 - Martin Braun

Answer 2

尝试在GoogleMap()小部件中添加padding选项

GoogleMap(
               initialCameraPosition: CameraPosition(
               target: _locationCoords, zoom: 12.0),
               markers: Set.from(allMarkers),
               onMapCreated: mapCreated,
               zoomControlsEnabled: true,
               zoomGesturesEnabled: true,
               scrollGesturesEnabled: true,
               compassEnabled: true,
               padding: EdgeInsets.only(
                 bottom:MediaQuery.of(context).size.height*0.25),
         )

padding:EdgeInsets.only(bottom:MediaQuery.of(context).size.height*0.25),

- ayoub kouadir

---

也许人们不会喜欢在iOS设备上启用zoomControlsEnabled: true！ - Nikhil Solanki