如何在Flutter中实现并使用Azure Maps API？已阅Android SDK文档仍存疑

方案一：直接调用Azure Maps REST API #

Azure Maps提供了一系列REST接口，可在Flutter中通过http包直接调用，无需依赖原生SDK。

步骤1：添加依赖 #

在pubspec.yaml中添加http包：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

执行flutter pub get完成依赖安装。

步骤2：获取Azure Maps密钥 #

在Azure门户创建Azure Maps资源，获取主密钥或订阅密钥，所有API请求都需要用该密钥做身份验证。

步骤3：调用REST API示例 #

以地理编码（地址转坐标）为例：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<Map<String, dynamic>> geocodeAddress(String address) async {
  final apiKey = '你的Azure Maps密钥';
  final url = Uri.parse(
    'https://atlas.microsoft.com/search/address/json?api-version=1.0&subscription-key=$apiKey&query=$address'
  );
  
  final response = await http.get(url);
  
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('请求失败: ${response.statusCode}');
  }
}

调用后可解析返回的JSON数据，提取坐标、地址详情等信息。逆地理编码、路线规划、天气查询等其他接口，均可按类似方式调用，参数规则参考Azure Maps官方文档。

方案二：通过WebView加载Azure Maps Web控件 #

如果需要展示交互式地图，可使用webview_flutter包加载Azure Maps的Web页面。

步骤1：添加WebView依赖 #

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0

执行flutter pub get完成安装。

步骤2：创建内嵌Azure Maps的WebView页面 #

import 'package:webview_flutter/webview_flutter.dart';

class AzureMapsWebView extends StatefulWidget {
  const AzureMapsWebView({super.key});

  @override
  State<AzureMapsWebView> createState() => _AzureMapsWebViewState();
}

class _AzureMapsWebViewState extends State<AzureMapsWebView> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadHtmlString('''
<!DOCTYPE html>
<html>
<head>
    <title>Azure Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />
    <style>
        body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = new atlas.Map('map', {
            center: [-122.33, 47.6],
            zoom: 12,
            authOptions: {
                authType: 'subscriptionKey',
                subscriptionKey: '你的Azure Maps密钥'
            }
        });
        
        // 添加标记示例
        map.events.add('ready', function() {
            var marker = new atlas.HtmlMarker({
                position: [-122.33, 47.6],
                text: 'A'
            });
            map.markers.add(marker);
        });
    </script>
</body>
</html>
      ''');
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(controller: controller);
  }
}

该方案可直接在Flutter中实现缩放、标记、路线绘制等交互式地图功能。

方案三：通过Platform Channel调用原生SDK #

若需深度定制原生地图功能，可通过Flutter的Platform Channel调用Azure Maps的Android/iOS原生SDK。

Android端配置 #

1. 在Android项目build.gradle中添加依赖：

dependencies {
    implementation "com.microsoft.azure.maps:mapcontrol:2.0.0"
}

2. 在AndroidManifest.xml中添加权限和密钥：

<uses-permission android:name="android.permission.INTERNET" />
<meta-data
    android:name="com.microsoft.azure.maps.mapcontrol.subscriptionKey"
    android:value="你的Azure Maps密钥" />

3. 创建Method Channel，实现Flutter与原生之间的地图操作指令传递（如显示地图、添加标记）。

iOS端配置 #

1. 在iOS项目Podfile中添加依赖：

pod 'AzureMapsMapControl', '~> 2.0'

2. 在Info.plist中添加密钥和权限：

<key>MASubscriptionKey</key>
<string>你的Azure Maps密钥</string>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

3. 通过Method Channel实现Flutter与iOS原生的交互。

内容的提问来源于stack exchange，提问作者Nabaraj Bhandari