flutter如何在web端使用高德地图实现选点功能

在Flutter的Web端项目中，如何集成高德地图实现选点功能？尝试过amap_flutter_web插件，但无法触发地图点击事件获取坐标。是否需要额外配置JS API或使用iframe方案？求具体实现步骤和关键代码示例。

2 回复

在Flutter Web中使用高德地图选点功能：

  1. 引入flutter_amap_web插件
  2. 初始化AMap，设置mapClick监听
  3. 点击地图时获取经纬度坐标
  4. 通过逆地理编码获取详细地址
  5. 返回选点结果

核心代码：

AMapController(
  onMapClick: (LatLng latLng) {
    // 获取坐标并逆地理编码
  }
)

更多关于flutter如何在web端使用高德地图实现选点功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter Web端使用高德地图实现选点功能，可以通过以下步骤实现：

1. 添加依赖

在 pubspec.yaml 中添加 webview_flutter 插件（确保使用支持Web的版本）：

dependencies:
  webview_flutter: ^4.0.0

2. 获取高德地图Web端API Key

  • 前往高德开放平台注册账号并创建应用
  • 获取Web服务的JavaScript API Key

3. 创建地图选点页面

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MapPickerPage extends StatefulWidget {
  @override
  _MapPickerPageState createState() => _MapPickerPageState();
}

class _MapPickerPageState extends State<MapPickerPage> {
  late WebViewController _controller;
  final String apiKey = '你的高德地图API Key';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('选择位置')),
      body: WebView(
        initialUrl: 'about:blank',
        onWebViewCreated: (WebViewController controller) {
          _controller = controller;
          _loadHtml();
        },
        javascriptMode: JavascriptMode.unrestricted,
        onPageFinished: (url) {
          // 页面加载完成后注入JavaScript
        },
      ),
    );
  }

  void _loadHtml() {
    final html = '''
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>地图选点</title>
  <style>
    #container {width:100%; height:100vh;}
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="https://webapi.amap.com/maps?v=2.0&key=$apiKey"></script>
  <script>
    var map = new AMap.Map('container', {
      zoom: 13,
      center: [116.397428, 39.90923]
    });

    var marker = new AMap.Marker({
      position: map.getCenter(),
      draggable: true
    });
    map.add(marker);

    // 地图点击事件
    map.on('click', function(e) {
      marker.setPosition(e.lnglat);
      
      // 将坐标发送到Flutter
      if (window.flutter_inappwebview) {
        window.flutter_inappwebview.callHandler('locationSelected', e.lnglat);
      }
    });

    // 标记拖拽事件
    marker.on('dragend', function(e) {
      var position = marker.getPosition();
      if (window.flutter_inappwebview) {
        window.flutter_inappwebview.callHandler('locationSelected', position);
      }
    });
  </script>
</body>
</html>
    ''';
    _controller.loadUrl(Uri.dataFromString(html, mimeType: 'text/html').toString());
  }
}

4. 处理位置选择结果

修改WebView创建部分，添加JavaScript通道：

WebView(
  initialUrl: 'about:blank',
  onWebViewCreated: (WebViewController controller) {
    _controller = controller;
    _loadHtml();
  },
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: <JavascriptChannel>{
    JavascriptChannel(
      name: 'locationSelected',
      onMessageReceived: (JavascriptMessage message) {
        // 处理返回的坐标信息
        final location = json.decode(message.message);
        final double lng = location['lng'];
        final double lat = location['lat'];
        
        // 返回上级页面并携带坐标
        Navigator.of(context).pop({'lng': lng, 'lat': lat});
      },
    ),
  }.toSet(),
)

5. 使用选点页面

// 在需要的地方打开地图选点页面
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => MapPickerPage()),
);

if (result != null) {
  print('经度: ${result['lng']}, 纬度: ${result['lat']}');
  // 在这里处理选择的坐标
}

注意事项：

  1. 替换 apiKey 为你的实际高德地图API Key
  2. 需要处理WebView的跨域问题
  3. 建议添加加载状态和错误处理
  4. 可以根据需要自定义地图样式和标记图标

这样就能在Flutter Web端实现高德地图的选点功能了。

回到顶部