212 lines
7.0 KiB
Dart
212 lines
7.0 KiB
Dart
|
// lib/widgets/map_preview_widget.dart
|
|||
|
|
import 'dart:async';
|
|||
|
|
import 'dart:convert';
|
|||
|
|
import 'package:flutter/material.dart';
|
|||
|
|
import 'package:qhd_prevention/tools/asset_server.dart';
|
|||
|
|
import 'package:webview_flutter/webview_flutter.dart';
|
|||
|
|
|
|||
|
|
/// MapPreviewWidget：只读缩略地图（不能交互），显示传入的点位（markers）。
|
|||
|
|
/// points 格式示例：
|
|||
|
|
/// [ { "longitude": 116.397428, "latitude": 39.90923, "iconPath": "/static/marker50.png" }, ... ]
|
|||
|
|
class MapPreviewWidget extends StatefulWidget {
|
|||
|
|
const MapPreviewWidget({
|
|||
|
|
Key? key,
|
|||
|
|
required this.points,
|
|||
|
|
this.width = 160,
|
|||
|
|
this.height = 160,
|
|||
|
|
this.borderRadius = 6,
|
|||
|
|
this.showBorder = true,
|
|||
|
|
this.defaultLongitude = 116.397428,
|
|||
|
|
this.defaultLatitude = 39.90923,
|
|||
|
|
this.defaultZoom = 15,
|
|||
|
|
}) : super(key: key);
|
|||
|
|
|
|||
|
|
final List<Map<String, dynamic>> points;
|
|||
|
|
final double width;
|
|||
|
|
final double height;
|
|||
|
|
final double borderRadius;
|
|||
|
|
final bool showBorder;
|
|||
|
|
|
|||
|
|
/// 当 points 为空时使用的默认中心（北京）
|
|||
|
|
final double defaultLongitude;
|
|||
|
|
final double defaultLatitude;
|
|||
|
|
final int defaultZoom;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
State<MapPreviewWidget> createState() => _MapPreviewWidgetState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _MapPreviewWidgetState extends State<MapPreviewWidget> {
|
|||
|
|
late final WebViewController _controller;
|
|||
|
|
bool _loading = true;
|
|||
|
|
Uri? _baseUri;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void initState() {
|
|||
|
|
super.initState();
|
|||
|
|
|
|||
|
|
// 创建 controller（无需 JS channel，因为不需要回调）
|
|||
|
|
_controller = WebViewController()
|
|||
|
|
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
|||
|
|
..setNavigationDelegate(NavigationDelegate(
|
|||
|
|
onPageFinished: (url) async {
|
|||
|
|
// 页面加载完成后注入“居中 + 阻止交互”的脚本
|
|||
|
|
await _injectCenterAndBlock();
|
|||
|
|
setState(() {
|
|||
|
|
_loading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onWebResourceError: (err) {
|
|||
|
|
debugPrint('[MapPreview] WebResourceError: $err');
|
|||
|
|
},
|
|||
|
|
));
|
|||
|
|
|
|||
|
|
// 启动本地 server 并加载 page
|
|||
|
|
_initServerAndLoad();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _initServerAndLoad() async {
|
|||
|
|
_baseUri = await AssetServer().start(); // 单例 asset server
|
|||
|
|
// 把 points JSON 编码到 URL（map.html 已能处理 point 参数）
|
|||
|
|
final jsonPoints = jsonEncode(widget.points);
|
|||
|
|
final encoded = Uri.encodeComponent(jsonPoints);
|
|||
|
|
final uri = Uri.parse('${_baseUri.toString()}/map.html?point=$encoded&t=${DateTime.now().millisecondsSinceEpoch}');
|
|||
|
|
debugPrint('[MapPreview] load url: $uri');
|
|||
|
|
try {
|
|||
|
|
await _controller.loadRequest(uri);
|
|||
|
|
} catch (e) {
|
|||
|
|
debugPrint('[MapPreview] loadRequest failed: $e');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算点位平均中心（如果没有点则返回 null）
|
|||
|
|
Map<String, double>? _computeAverageCenter() {
|
|||
|
|
double sumLon = 0.0, sumLat = 0.0;
|
|||
|
|
int count = 0;
|
|||
|
|
for (final p in widget.points) {
|
|||
|
|
try {
|
|||
|
|
final lon = _toDouble(p['longitude'] ?? p['longitue'] ?? p['long']);
|
|||
|
|
final lat = _toDouble(p['latitude'] ?? p['lat']);
|
|||
|
|
if (lon != null && lat != null) {
|
|||
|
|
sumLon += lon;
|
|||
|
|
sumLat += lat;
|
|||
|
|
count++;
|
|||
|
|
}
|
|||
|
|
} catch (_) {}
|
|||
|
|
}
|
|||
|
|
if (count == 0) return null;
|
|||
|
|
return {'longitude': sumLon / count, 'latitude': sumLat / count};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
double? _toDouble(dynamic v) {
|
|||
|
|
if (v == null) return null;
|
|||
|
|
if (v is double) return v;
|
|||
|
|
if (v is int) return v.toDouble();
|
|||
|
|
if (v is String) {
|
|||
|
|
final cleaned = v.replaceAll(RegExp(r'[^\d\.\-]'), '');
|
|||
|
|
return double.tryParse(cleaned);
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 注入 JS：设置中心并插入一个透明的覆盖层阻止所有页面内交互
|
|||
|
|
Future<void> _injectCenterAndBlock() async {
|
|||
|
|
final center = _computeAverageCenter();
|
|||
|
|
final lon = center != null ? center['longitude']! : widget.defaultLongitude;
|
|||
|
|
final lat = center != null ? center['latitude']! : widget.defaultLatitude;
|
|||
|
|
final zoom = widget.defaultZoom;
|
|||
|
|
|
|||
|
|
// JS：尝试用几种不同地图 API 的方式设置中心与缩放（兼容性考虑），
|
|||
|
|
// 然后在页面上加一个透明 div 覆盖层，阻止交互（pointerEvents 会拦截）
|
|||
|
|
final js = '''
|
|||
|
|
(function(){
|
|||
|
|
try {
|
|||
|
|
var lon = ${lon.toString()};
|
|||
|
|
var lat = ${lat.toString()};
|
|||
|
|
var zoom = ${zoom.toString()};
|
|||
|
|
// try custom setter
|
|||
|
|
try {
|
|||
|
|
if (typeof window.setMapCenter === 'function') {
|
|||
|
|
window.setMapCenter(lon, lat, zoom);
|
|||
|
|
}
|
|||
|
|
} catch(e) {}
|
|||
|
|
// Try T.Map style (used in your map.html)
|
|||
|
|
try {
|
|||
|
|
if (typeof map !== 'undefined' && map) {
|
|||
|
|
if (typeof map.centerAndZoom === 'function' && typeof T !== 'undefined') {
|
|||
|
|
try { map.centerAndZoom(new T.LngLat(lon, lat), zoom); } catch(e) {}
|
|||
|
|
} else if (typeof map.setCenter === 'function') {
|
|||
|
|
try { map.setCenter(new BMap.Point(lon, lat)); if (typeof map.setZoom === 'function') map.setZoom(zoom); } catch(e) {}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch(e) {}
|
|||
|
|
// Add a full-page transparent blocker DIV to prevent interactions
|
|||
|
|
try {
|
|||
|
|
// avoid duplicate block
|
|||
|
|
if (!document.getElementById('flutter_preview_block')) {
|
|||
|
|
var block = document.createElement('div');
|
|||
|
|
block.id = 'flutter_preview_block';
|
|||
|
|
block.style.position = 'fixed';
|
|||
|
|
block.style.left = '0';
|
|||
|
|
block.style.top = '0';
|
|||
|
|
block.style.width = '100%';
|
|||
|
|
block.style.height = '100%';
|
|||
|
|
block.style.zIndex = '2147483647'; // very high
|
|||
|
|
block.style.background = 'transparent';
|
|||
|
|
// pointerEvents 'auto' means this div captures events and prevents underlying map from receiving them
|
|||
|
|
block.style.pointerEvents = 'auto';
|
|||
|
|
// ensure it doesn't block CSS visuals (transparent)
|
|||
|
|
document.documentElement.appendChild(block);
|
|||
|
|
}
|
|||
|
|
} catch (e) { console.log('preview block insert err', e); }
|
|||
|
|
} catch(e) {
|
|||
|
|
console.log('preview inject error', e);
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
''';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await _controller.runJavaScript(js);
|
|||
|
|
debugPrint('[MapPreview] injected center + blocker');
|
|||
|
|
} catch (e) {
|
|||
|
|
debugPrint('[MapPreview] inject error: $e');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void dispose() {
|
|||
|
|
// 不停止单例 AssetServer（可能被其它页面复用）
|
|||
|
|
super.dispose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
return ClipRRect(
|
|||
|
|
borderRadius: BorderRadius.circular(widget.borderRadius),
|
|||
|
|
child: Container(
|
|||
|
|
width: widget.width,
|
|||
|
|
height: widget.height,
|
|||
|
|
decoration: widget.showBorder
|
|||
|
|
? BoxDecoration(
|
|||
|
|
color: Colors.white,
|
|||
|
|
border: Border.all(color: Colors.black12),
|
|||
|
|
borderRadius: BorderRadius.circular(widget.borderRadius),
|
|||
|
|
)
|
|||
|
|
: null,
|
|||
|
|
child: Stack(
|
|||
|
|
children: [
|
|||
|
|
// WebView（我们不使用 AbsorbPointer，因为 JS 覆盖层会阻止页面内交互）
|
|||
|
|
WebViewWidget(controller: _controller),
|
|||
|
|
if (_loading)
|
|||
|
|
const Positioned.fill(
|
|||
|
|
child: Center(
|
|||
|
|
child: SizedBox(width: 28, height: 28, child: CircularProgressIndicator(strokeWidth: 2)),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|