0

我正在使用 syncfusion_flutter_maps 包在我的颤振应用程序中导入谷歌地图，但无法用它更改地图样式。它需要 urlTemplate 。我们如何在这里使用谷歌地图样式？就像我们在 Flutter 谷歌地图包中所做的那样，只需提供 json 文件即可。

在这个包中，我们需要 urlTemplate；你可以在这里结帐：https ://help.syncfusion.com/flutter/maps/tile-layer

在这里，他们使用了一些 openStreetMap url 模板，但我想使用谷歌地图样式。让我知道是否有人这样做。

SfMaps(
          layers: <MapLayer>[
            MapTileLayer(
              /// URL to request the tiles from the providers.
              ///
              /// The [urlTemplate] accepts the URL in WMTS format i.e. {z} —
              /// zoom level, {x} and {y} — tile coordinates.
              ///
              /// We will replace the {z}, {x}, {y} internally based on the
              /// current center point and the zoom level.
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', // Want to use google maps styling here. How can I do that?
              zoomPanBehavior: _zoomPanBehavior,
              controller: _mapController,
              initialMarkersCount: _worldWonders.length,
              tooltipSettings: const MapTooltipSettings(
                color: Colors.transparent,
              ),
              markerTooltipBuilder: (BuildContext context, int index) {
                if (!_isDesktop) {
                  return ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(8)),
                    child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(
                            width: 150,
                            height: 80,
                            color: Colors.grey,
                            child: Image.asset(
                              _worldWonders[index].tooltipImagePath,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.only(
                                left: 10.0, top: 5.0, bottom: 5.0),
                            width: 150,
                            color: Colors.white,
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    _worldWonders[index].place,
                                    style: const TextStyle(
                                        fontSize: 14,
                                        color: Colors.black,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 5.0),
                                    child: Text(
                                      _worldWonders[index].state +
                                          ', ' +
                                          _worldWonders[index].country,
                                      style: const TextStyle(
                                          fontSize: 10, color: Colors.black),
                                    ),
                                  )
                                ]),
                          ),
                        ]),
                  );
                }

                return const SizedBox();
              },
              markerBuilder: (BuildContext context, int index) {
                final double _markerSize =
                    _currentSelectedIndex == index ? 40 : 25;
                return MapMarker(
                  latitude: _worldWonders[index].latitude,
                  longitude: _worldWonders[index].longitude,
                  alignment: Alignment.bottomCenter,
                  child: GestureDetector(
                    onTap: () {
                      if (_currentSelectedIndex != index) {
                        _canUpdateFocalLatLng = false;
                        _tappedMarkerIndex = index;
                        _pageViewController.animateToPage(
                          index,
                          duration: const Duration(milliseconds: 500),
                          curve: Curves.easeInOut,
                        );
                      }
                    },
                    child: AnimatedContainer(
                      duration: const Duration(milliseconds: 500),
                      height: _markerSize,
                      width: _markerSize,
                      child: FittedBox(
                        child: Icon(Icons.access_alarm,
                            color: _currentSelectedIndex == index
                                ? Colors.blue
                                : Colors.green,
                            size: _markerSize),
                      ),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
4

1 回答 1

0

查询一：如何在syncfusion颤动地图中使用谷歌地图？

SfMaps 小部件中的切片图层支持通过唯一 URL 向不同切片提供者请求切片。根据以下文档，谷歌还通过其唯一的 URL 提供对 tile 请求的支持，并且它需要一个 API 密钥。

https://developers.google.com/maps/documentation/tile/

但是，在访问 Google Maps Tile API 以进行一般用途时似乎存在限制，如上述链接中所述。因此，请与 Google 销售团队确认 Google 提供的这种支持。

SfMaps 瓦片层不限于或特定于任何瓦片提供者。它支持使用各个图块提供者的唯一 URL 从任何图块提供者请求图块并呈现它们。它所需要的只是一个特定格式的 URL。查看以下用户指南文档以了解有关设置 URL 模板的更多信息。

https://help.syncfusion.com/flutter/maps/tile-layer#setting-url-template

查询 2：我们如何在这里使用 Google 地图样式？

在 SfMaps 中，没有直接支持像谷歌地图这样的样式。但是，您可以通过在 URL 模板本身中设置样式类型来更改地图的样式。为此，您可以在其官方网站上查看提供商所需的确切 URL 格式。因此，请检查谷歌地图 URL 模板中是否有类似的选项用于样式设置。

https://developers.google.com/maps/documentation/tile/

但是，在访问 Google Maps Tile API 以进行一般用途时似乎存在限制，如上述链接中所述。因此，请与 Google 销售团队确认 Google 提供的这种支持。

于 2022-01-04T18:19:34.137 回答