如何在Flutter web中显示中国地图？

Question

我需要在 Flutter Web 应用程序中将中国住宅区的位置显示为

Widget

。 OpenStreetMap 和其他西方地图提供商（如 Google 和 Bing）还不够，因为它们不提供此级别的高度详细的数据，并且经常显示过时的信息。

我尝试使用包

flutter_map

，但是默认情况下它使用OpenStreetMap的API，这对于我的情况来说是不够的。我需要使用像百度这样的中文提供商，但我不习惯它们，尤其是因为我不是中国人。

Answer 1

除了可用于显示地图的优质 Flutter 包数量较少之外，中国地图提供商通常很难为非中国公民或应在中国境外运行的应用程序使用。

对于百度来说，有一个Flutter的包，但它根本没有英文文档，而且仅适用于移动应用程序，不适用于Web。此外，使用它需要百度地图开发者平台的API密钥，而API密钥又需要使用身份证进行身份验证，这意味着非中国公民无法使用。

另一个提供商是Amap（高德地图），它是Alibaba产品之一。它还需要一个经过验证的帐户，但可以通过支付宝快速完成。他们有一个易于使用的静态地图API，但我发现它拒绝来自非中国IP的任何连接尝试！

但是，网站Amap.com在中国境外可以正常运行。因此，我们可以使用与构建网站相同的 API。使用浏览器中开发者工具的网络选项卡并按图像过滤，我们可以看到以下请求：

这些 API 调用返回与显示区域相对应的地图图块。从他们的 URL 来看，他们似乎遵循 Slippy Map Tile Names，类似于 OpenStreetMap。

这是

flutter_map

中使用的默认标准。因此，我们可以使用这些 URL 之一，同时替换

x

、

y

、

z

变量：

    FlutterMap(
        options: const MapOptions(),
        children: [
          TileLayer(
            urlTemplate: 'https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
            tileProvider: CancellableNetworkTileProvider(),
          ),
        ],
    );

有一个参数

lang=zh_cn

可以更改为

lang=en

以显示英文标签而不是中文，但不建议这样做，因为英文版本相比中文版本缺少很多细节。其他参数不应更改。