How to display a Chinese map in Flutter web?

I need to show the location of a residential area in China in a Flutter Web app as a Widget. OpenStreetMap and other Western map providers like Google and Bing are insufficient because they do not offer highly detailed data at this level and often show outdated information.

I tried using the package flutter_map, however, by default it uses the API of OpenStreetMap, which is not enough for my situation. I need to use a Chinese provider like Baidu, but I am not used to them especially since I am not Chinese.

In addition to the low number of quality Flutter packages available to display maps, Chinese map providers are generally hard to use for non-Chinese citizens or for apps that should work outside China.

For Baidu, there is a package for Flutter, but it has no English documentation at all, and it is available only for Mobile apps, not for the Web. Furthermore, using it requires an API key from the Baidu Map Developer Platform, which in turn requires an identity verification using an ID card, meaning that it is impossible to be used by a non-Chinese citizen.

Another provider is Amap (高德地图), which is one of the Alibaba products. It also requires a verified account but it can be done quickly through Alipay. They have an easy-to-use static maps API, but I found out that it rejects any connection attempt from non-Chinese IPs!

However, the website Amap.com works correctly from outside China. Therefore, we can use the same API that the website is built on. Using the Network tab of the Developer tools in the browser and filtering by images, we can see the following requests:

These are API calls that return the map tiles corresponding to the displayed region. From their URLs, they appear to follow the Slippy Map Tile Names similarly to OpenStreetMap.

This is the default standard used in flutter_map. Consequently, we can use one of these URLs while replacing the x, y, z variables:

    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(),
          ),
        ],
    );

There is a parameter lang=zh_cn that can be changed to lang=en to display the labels in English instead of Chinese, but it is not recommended to do so because the English version is missing a lot of details compared to the Chinese version. Other parameters should not be changed.