488 lines
15 KiB
Dart
488 lines
15 KiB
Dart
// lib/pages/map_webview_page.dart
|
||
import 'dart:async';
|
||
import 'dart:convert';
|
||
import 'dart:math' as math;
|
||
|
||
import 'package:flutter/material.dart';
|
||
import 'package:geolocator/geolocator.dart';
|
||
import 'package:qhd_prevention/customWidget/toast_util.dart';
|
||
import 'package:qhd_prevention/pages/my_appbar.dart';
|
||
import 'package:webview_flutter/webview_flutter.dart';
|
||
|
||
class MapWebViewPage extends StatefulWidget {
|
||
const MapWebViewPage({this.canEdit = true,this.oldLongitude = '',this.oldLatitude = '', Key? key}) : super(key: key);
|
||
|
||
final bool canEdit;
|
||
final String oldLongitude;
|
||
final String oldLatitude;
|
||
|
||
@override
|
||
State<MapWebViewPage> createState() => _MapWebViewPageState();
|
||
}
|
||
|
||
class _MapWebViewPageState extends State<MapWebViewPage> {
|
||
late final WebViewController _controller;
|
||
bool _loading = true;
|
||
String _mapUrl = '';
|
||
double? _selectedLongitude;
|
||
double? _selectedLatitude;
|
||
bool _locationError = false;
|
||
|
||
// 默认坐标（北京）
|
||
static const double defaultLongitude = 116.397428;
|
||
static const double defaultLatitude = 39.90923;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_initializeWebView();
|
||
_initializeMap();
|
||
}
|
||
|
||
void _initializeWebView() {
|
||
_controller = WebViewController()
|
||
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
||
..addJavaScriptChannel('FlutterChannel', onMessageReceived: _onMessageReceived)
|
||
..setNavigationDelegate(NavigationDelegate(
|
||
onPageStarted: (url) {
|
||
debugPrint('页面开始加载: $url');
|
||
},
|
||
onPageFinished: (url) {
|
||
debugPrint('页面加载完成: $url');
|
||
setState(() {
|
||
_loading = false;
|
||
});
|
||
_injectFlutterBridge();
|
||
},
|
||
onWebResourceError: (error) {
|
||
debugPrint('Web资源错误: ${error.errorCode} - ${error.description}');
|
||
setState(() {
|
||
_loading = false;
|
||
});
|
||
},
|
||
onNavigationRequest: (request) {
|
||
debugPrint('导航请求: ${request.url}');
|
||
return NavigationDecision.navigate;
|
||
},
|
||
));
|
||
}
|
||
|
||
Future<void> _initializeMap() async {
|
||
try {
|
||
debugPrint('开始获取位置信息...');
|
||
|
||
// 先设置默认URL，避免长时间等待
|
||
final defaultCoord = _gcj02ToBd09(defaultLongitude, defaultLatitude);
|
||
_setMapUrl(defaultCoord[0], defaultCoord[1]);
|
||
|
||
var position ;
|
||
if(widget.canEdit){
|
||
// 异步获取当前位置
|
||
position = await _getCurrentLocationWithTimeout();
|
||
}else{
|
||
try{
|
||
double oldLongitude = double.parse(widget.oldLongitude);
|
||
double oldLatitude = double.parse(widget.oldLatitude);
|
||
position = Position(longitude: oldLongitude, latitude:oldLatitude ,
|
||
timestamp: DateTime.now(), accuracy: 0.0, altitude: 0.0, altitudeAccuracy: 0.0, heading: 0.0,
|
||
headingAccuracy: 0.0, speed: 0.0, speedAccuracy: 0.0);
|
||
}catch (e) {
|
||
// 异步获取当前位置
|
||
position = await _getCurrentLocationWithTimeout();
|
||
}
|
||
}
|
||
|
||
if (position != null) {
|
||
debugPrint('成功获取位置: ${position.longitude}, ${position.latitude}');
|
||
// GCJ02 -> BD09 坐标转换
|
||
final bd09Coord = _gcj02ToBd09(position.longitude, position.latitude);
|
||
_setMapUrl(bd09Coord[0], bd09Coord[1]);
|
||
} else {
|
||
debugPrint('使用默认位置');
|
||
_showToast('使用默认位置，您可以手动选择位置');
|
||
}
|
||
|
||
// 加载地图
|
||
await _controller.loadRequest(Uri.parse(_mapUrl));
|
||
|
||
} catch (e) {
|
||
debugPrint('地图初始化失败: $e');
|
||
// 即使出错也继续加载地图，使用默认位置
|
||
_showToast('位置获取失败，使用默认位置');
|
||
await _controller.loadRequest(Uri.parse(_mapUrl));
|
||
}
|
||
}
|
||
|
||
Future<Position?> _getCurrentLocationWithTimeout() async {
|
||
try {
|
||
// 首先检查定位服务是否开启
|
||
bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
|
||
if (!serviceEnabled) {
|
||
debugPrint('定位服务未开启');
|
||
_showToast('定位服务未开启，使用默认位置');
|
||
return null;
|
||
}
|
||
|
||
// 检查权限
|
||
LocationPermission permission = await Geolocator.checkPermission();
|
||
debugPrint('当前定位权限: $permission');
|
||
|
||
if (permission == LocationPermission.denied) {
|
||
permission = await Geolocator.requestPermission();
|
||
debugPrint('请求后定位权限: $permission');
|
||
}
|
||
|
||
if (permission == LocationPermission.denied ||
|
||
permission == LocationPermission.deniedForever) {
|
||
debugPrint('定位权限被拒绝');
|
||
_showToast('定位权限被拒绝，使用默认位置');
|
||
return null;
|
||
}
|
||
|
||
// 设置超时
|
||
final position = await Geolocator.getCurrentPosition(
|
||
desiredAccuracy: LocationAccuracy.best,
|
||
).timeout(const Duration(seconds: 10));
|
||
|
||
return position;
|
||
} catch (e) {
|
||
debugPrint('获取位置异常: $e');
|
||
// 尝试获取最后已知位置
|
||
try {
|
||
final lastPosition = await Geolocator.getLastKnownPosition();
|
||
if (lastPosition != null) {
|
||
debugPrint('使用最后已知位置: ${lastPosition.longitude}, ${lastPosition.latitude}');
|
||
return lastPosition;
|
||
}
|
||
} catch (e) {
|
||
debugPrint('获取最后已知位置失败: $e');
|
||
}
|
||
return null;
|
||
}
|
||
}
|
||
|
||
void _setMapUrl(double longitude, double latitude) {
|
||
final timestamp = DateTime.now().millisecondsSinceEpoch;
|
||
setState(() {
|
||
_mapUrl = 'https://skqhdg.porthebei.com:9004/map/map.html?'
|
||
'longitude=$longitude&'
|
||
'latitude=$latitude&'
|
||
't=$timestamp';
|
||
});
|
||
debugPrint('地图URL: $_mapUrl');
|
||
}
|
||
|
||
void _injectFlutterBridge() {
|
||
const bridgeScript = '''
|
||
// 重写uni.postMessage以发送到Flutter
|
||
if (typeof uni !== 'undefined') {
|
||
const originalPostMessage = uni.postMessage;
|
||
uni.postMessage = function(data) {
|
||
console.log('uni.postMessage被调用:', data);
|
||
// 发送到Flutter
|
||
if (window.FlutterChannel) {
|
||
try {
|
||
window.FlutterChannel.postMessage(JSON.stringify(data));
|
||
} catch(e) {
|
||
console.log('发送到Flutter失败:', e);
|
||
}
|
||
}
|
||
// 保持原有逻辑
|
||
if (typeof originalPostMessage === 'function') {
|
||
originalPostMessage(data);
|
||
}
|
||
};
|
||
|
||
// 确保plus环境检测返回true
|
||
uni.getEnv = function(callback) {
|
||
if (typeof callback === 'function') {
|
||
callback({ plus: true });
|
||
}
|
||
};
|
||
}
|
||
|
||
// 添加Flutter专用的消息发送方法
|
||
window.sendToFlutter = function(data) {
|
||
console.log('sendToFlutter被调用:', data);
|
||
if (window.FlutterChannel) {
|
||
try {
|
||
window.FlutterChannel.postMessage(JSON.stringify(data));
|
||
} catch(e) {
|
||
console.log('发送到Flutter失败:', e);
|
||
}
|
||
}
|
||
};
|
||
|
||
console.log('Flutter bridge注入完成');
|
||
''';
|
||
|
||
_controller.runJavaScript(bridgeScript).catchError((error) {
|
||
debugPrint('注入Flutter bridge失败: $error');
|
||
});
|
||
}
|
||
|
||
void _onMessageReceived(JavaScriptMessage message) {
|
||
try {
|
||
debugPrint('收到原始消息: ${message.message}');
|
||
final data = jsonDecode(message.message);
|
||
debugPrint('解析后的消息: $data');
|
||
|
||
// 解析坐标数据
|
||
if (data != null) {
|
||
final coords = data['data'];
|
||
setState(() {
|
||
_selectedLongitude = coords['longitue'];
|
||
_selectedLatitude = coords['latitude'];
|
||
});
|
||
|
||
debugPrint('选中坐标: $_selectedLongitude, $_selectedLatitude');
|
||
} else {
|
||
debugPrint('无法从消息中提取坐标');
|
||
}
|
||
} catch (e) {
|
||
debugPrint('解析地图消息失败: $e');
|
||
debugPrint('原始消息内容: ${message.message}');
|
||
}
|
||
}
|
||
|
||
Map<String, double>? _extractCoordinates(dynamic data) {
|
||
try {
|
||
debugPrint('开始提取坐标，数据类型: ${data.runtimeType}');
|
||
|
||
if (data is Map) {
|
||
// 处理不同的数据结构
|
||
dynamic coordsData = data;
|
||
|
||
// 处理嵌套结构
|
||
if (data.containsKey('data') && data['data'] is List && data['data'].isNotEmpty) {
|
||
coordsData = data['data'][0];
|
||
debugPrint('从data数组中提取坐标数据');
|
||
}
|
||
|
||
if (coordsData is Map) {
|
||
debugPrint('坐标数据键: ${coordsData.keys}');
|
||
|
||
// 处理拼写错误 (longitue -> longitude)
|
||
final longitude = _toDouble(coordsData['longitude']) ??
|
||
_toDouble(coordsData['longitue']);
|
||
final latitude = _toDouble(coordsData['latitude']);
|
||
|
||
debugPrint('解析结果 - 经度: $longitude, 纬度: $latitude');
|
||
|
||
if (longitude != null && latitude != null) {
|
||
return {
|
||
'longitude': longitude,
|
||
'latitude': latitude,
|
||
};
|
||
}
|
||
}
|
||
} else if (data is String) {
|
||
// 尝试从字符串中提取坐标
|
||
debugPrint('尝试从字符串中提取坐标');
|
||
final coordPattern = RegExp(r'[-+]?\d+\.\d+');
|
||
final matches = coordPattern.allMatches(data).toList();
|
||
if (matches.length >= 2) {
|
||
final longitude = double.tryParse(matches[0].group(0)!);
|
||
final latitude = double.tryParse(matches[1].group(0)!);
|
||
if (longitude != null && latitude != null) {
|
||
return {
|
||
'longitude': longitude,
|
||
'latitude': latitude,
|
||
};
|
||
}
|
||
}
|
||
}
|
||
} catch (e) {
|
||
debugPrint('提取坐标失败: $e');
|
||
}
|
||
return null;
|
||
}
|
||
|
||
double? _toDouble(dynamic value) {
|
||
if (value == null) return null;
|
||
if (value is double) return value;
|
||
if (value is int) return value.toDouble();
|
||
if (value is String) {
|
||
// 处理可能的字符串格式
|
||
final cleaned = value.replaceAll(RegExp(r'[^\d.-]'), '');
|
||
return double.tryParse(cleaned);
|
||
}
|
||
return null;
|
||
}
|
||
|
||
void _showToast(String message) {
|
||
if (!mounted) return;
|
||
ToastUtil.showNormal(context, message);
|
||
}
|
||
|
||
Future<void> _confirmSelection() async {
|
||
if (_selectedLongitude == null || _selectedLatitude == null) {
|
||
// 如果没有选中位置，尝试从页面获取当前位置
|
||
await _getCurrentLocationFromPage();
|
||
}
|
||
|
||
if (_selectedLongitude != null && _selectedLatitude != null) {
|
||
final result = {
|
||
'longitude': _selectedLongitude!,
|
||
'latitude': _selectedLatitude!,
|
||
};
|
||
|
||
debugPrint('返回坐标结果: $result');
|
||
Navigator.of(context).pop(result);
|
||
} else {
|
||
_showToast('请先在地图上选择位置');
|
||
}
|
||
}
|
||
|
||
Future<void> _getCurrentLocationFromPage() async {
|
||
try {
|
||
debugPrint('尝试从页面获取选中位置');
|
||
const getterScript = '''
|
||
(function(){
|
||
try {
|
||
// 尝试多种方式获取选中位置
|
||
if (typeof getSelectedLocation === 'function') {
|
||
var result = getSelectedLocation();
|
||
if (result) return JSON.stringify(result);
|
||
}
|
||
|
||
if (window.selectedLocation) {
|
||
return JSON.stringify(window.selectedLocation);
|
||
}
|
||
|
||
// 如果没有选中位置，返回地图中心
|
||
if (map && typeof map.getCenter === 'function') {
|
||
var center = map.getCenter();
|
||
return JSON.stringify({
|
||
longitude: center.getLng(),
|
||
latitude: center.getLat()
|
||
});
|
||
}
|
||
|
||
return null;
|
||
} catch(e) {
|
||
console.log('获取位置错误:', e);
|
||
return null;
|
||
}
|
||
})();
|
||
''';
|
||
|
||
final result = await _controller.runJavaScriptReturningResult(getterScript);
|
||
debugPrint('页面返回的位置结果: $result');
|
||
|
||
if (result != null) {
|
||
String resultString = result.toString();
|
||
// 处理可能的双重编码
|
||
if (resultString.startsWith('"') && resultString.endsWith('"')) {
|
||
resultString = resultString.substring(1, resultString.length - 1);
|
||
}
|
||
|
||
final coords = _extractCoordinates(jsonDecode(resultString));
|
||
if (coords != null) {
|
||
setState(() {
|
||
_selectedLongitude = coords['longitude'];
|
||
_selectedLatitude = coords['latitude'];
|
||
});
|
||
debugPrint('从页面获取到坐标: $_selectedLongitude, $_selectedLatitude');
|
||
}
|
||
}
|
||
} catch (e) {
|
||
debugPrint('从页面获取位置失败: $e');
|
||
}
|
||
}
|
||
|
||
void _retryLocation() async {
|
||
setState(() {
|
||
_loading = true;
|
||
_locationError = false;
|
||
});
|
||
|
||
await _initializeMap();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
appBar: MyAppbar(
|
||
title: '地图选点',
|
||
actions: [
|
||
if (_selectedLongitude != null&&widget.canEdit)
|
||
TextButton(
|
||
onPressed: _confirmSelection,
|
||
child: const Text(
|
||
'确定',
|
||
style: TextStyle(color: Colors.white, fontSize: 17),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
body: Column(
|
||
children: [
|
||
// 状态提示栏
|
||
if (_locationError)
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||
color: Colors.orange[100],
|
||
child: Row(
|
||
children: [
|
||
Icon(Icons.warning_amber, color: Colors.orange[800], size: 16),
|
||
const SizedBox(width: 8),
|
||
Expanded(
|
||
child: Text(
|
||
'定位失败，使用默认位置',
|
||
style: TextStyle(color: Colors.orange[800], fontSize: 12),
|
||
),
|
||
),
|
||
TextButton(
|
||
onPressed: _retryLocation,
|
||
child: Text(
|
||
'重试',
|
||
style: TextStyle(color: Colors.orange[800], fontSize: 12),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
// 地图区域
|
||
Expanded(
|
||
child: Stack(
|
||
children: [
|
||
if (_mapUrl.isNotEmpty)
|
||
WebViewWidget(controller: _controller),
|
||
|
||
if (_loading)
|
||
const Center(
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
CircularProgressIndicator(),
|
||
SizedBox(height: 16),
|
||
Text('地图加载中...'),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// GCJ02 -> BD09 坐标转换
|
||
List<double> _gcj02ToBd09(double lng, double lat) {
|
||
const double xPi = math.pi * 3000.0 / 180.0;
|
||
final double z = math.sqrt(lng * lng + lat * lat) + 0.00002 * math.sin(lat * xPi);
|
||
final double theta = math.atan2(lat, lng) + 0.000003 * math.cos(lng * xPi);
|
||
final double bdLng = z * math.cos(theta) + 0.0065;
|
||
final double bdLat = z * math.sin(theta) + 0.006;
|
||
return [bdLng, bdLat];
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
super.dispose();
|
||
debugPrint('地图页面销毁');
|
||
}
|
||
} |