343 lines
11 KiB
Dart
343 lines
11 KiB
Dart
// baidu_map_webview_debug.dart
|
||
import 'dart:async';
|
||
import 'dart:convert';
|
||
import 'package:flutter/foundation.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:webview_flutter/webview_flutter.dart';
|
||
|
||
/// 更健壮的 BaiduMapWebView（带 JS 错误回传、ready 检测、超时/重试）
|
||
class BaiduMapWebView extends StatefulWidget {
|
||
final String ak; // 请确保这是 web (JS API) 可用的 AK
|
||
final double latitude;
|
||
final double longitude;
|
||
final int zoom; // 对应 uniapp 的 scale
|
||
final List<Map<String, dynamic>> covers;
|
||
final ValueChanged<Map<String, dynamic>>? onMarkerTap;
|
||
final Duration readyTimeout;
|
||
|
||
const BaiduMapWebView({
|
||
Key? key,
|
||
required this.ak,
|
||
required this.latitude,
|
||
required this.longitude,
|
||
this.zoom = 13,
|
||
this.covers = const [],
|
||
this.onMarkerTap,
|
||
this.readyTimeout = const Duration(seconds: 8),
|
||
}) : super(key: key);
|
||
|
||
@override
|
||
State<BaiduMapWebView> createState() => _BaiduMapWebViewState();
|
||
}
|
||
|
||
class _BaiduMapWebViewState extends State<BaiduMapWebView> {
|
||
late final WebViewController _controller;
|
||
bool _pageLoaded = false;
|
||
bool _mapReady = false;
|
||
String? _lastJsMessage;
|
||
Timer? _readyTimer;
|
||
bool _showError = false;
|
||
String _errorText = '';
|
||
|
||
String _html(String ak) {
|
||
// HTML 模板：创建 map，定义 setCenter / setMarkersFromFlutter，转发 console 与 onerror
|
||
return '''
|
||
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<meta charset="utf-8"/>
|
||
<style>html,body,#map{height:100%;margin:0;padding:0;background:#f0f0f0}</style>
|
||
</head>
|
||
<body>
|
||
<div id="map"></div>
|
||
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=$ak"></script>
|
||
<script>
|
||
// 把 console.log、console.error、window.onerror 转发给 Flutter（Bridge）
|
||
(function(){
|
||
function send(kind, msg) {
|
||
try { Bridge.postMessage(JSON.stringify({__bridge: true, kind: kind, msg: String(msg)})); } catch(e) {}
|
||
}
|
||
var _log = console.log;
|
||
console.log = function(){
|
||
try{ send('log', Array.prototype.slice.call(arguments).join(' ')); }catch(e){}
|
||
_log && _log.apply(console, arguments);
|
||
};
|
||
var _err = console.error;
|
||
console.error = function(){
|
||
try{ send('error', Array.prototype.slice.call(arguments).join(' ')); }catch(e){}
|
||
_err && _err.apply(console, arguments);
|
||
};
|
||
window.onerror = function(msg, url, line, col, err) {
|
||
try{ send('onerror', msg + ' at ' + url + ':' + line + ':' + col + ' -> ' + (err && err.stack? err.stack:'') ); }catch(e){}
|
||
};
|
||
})();
|
||
|
||
// 初始化地图
|
||
var map;
|
||
try {
|
||
map = new BMap.Map("map");
|
||
map.enableScrollWheelZoom(true);
|
||
} catch(e) {
|
||
console.error('Map init error', e);
|
||
}
|
||
|
||
function setCenter(lat, lng, zoom) {
|
||
try {
|
||
if(!map) { console.error('map undefined in setCenter'); return; }
|
||
var p = new BMap.Point(lng, lat);
|
||
map.centerAndZoom(p, zoom || map.getZoom());
|
||
} catch(e) {
|
||
console.error('setCenter error', e);
|
||
}
|
||
}
|
||
|
||
var markers = [];
|
||
function clearMarkers(){
|
||
try {
|
||
for(var i=0;i<markers.length;i++){
|
||
map.removeOverlay(markers[i]);
|
||
}
|
||
markers = [];
|
||
} catch(e) { console.error('clearMarkers error', e); }
|
||
}
|
||
|
||
function setMarkersFromFlutter(coversJson){
|
||
try {
|
||
if(!map) { console.error('map undefined in setMarkersFromFlutter'); return; }
|
||
var arr = JSON.parse(coversJson || '[]');
|
||
clearMarkers();
|
||
for (var i = 0; i < arr.length; i++) {
|
||
var it = arr[i];
|
||
if(!it || it.longitude==null || it.latitude==null) continue;
|
||
var pt = new BMap.Point(parseFloat(it.longitude), parseFloat(it.latitude));
|
||
var marker;
|
||
if (it.icon && it.icon.length > 0) {
|
||
// 图片过大可能失败，谨慎使用 base64 大图
|
||
var myIcon = new BMap.Icon(it.icon, new BMap.Size(36,36));
|
||
marker = new BMap.Marker(pt, {icon: myIcon});
|
||
} else {
|
||
marker = new BMap.Marker(pt);
|
||
}
|
||
try {
|
||
marker._meta = it.data || it;
|
||
} catch(e) { marker._meta = {}; }
|
||
(function(m){
|
||
m.addEventListener('click', function(){
|
||
try { Bridge.postMessage(JSON.stringify(m._meta)); } catch(e) {}
|
||
});
|
||
})(marker);
|
||
markers.push(marker);
|
||
map.addOverlay(marker);
|
||
}
|
||
} catch (e) {
|
||
console.error('setMarkersFromFlutter parse error', e);
|
||
}
|
||
}
|
||
|
||
// 地图初始化完成后发送 ready
|
||
function notifyReady(){
|
||
try{ Bridge.postMessage(JSON.stringify({__mapReady:true})); }catch(e){}
|
||
}
|
||
|
||
// 等待 map 实例, 然后 center 并通知 ready
|
||
(function waitMap(){
|
||
try {
|
||
if(map && typeof map.centerAndZoom === 'function') {
|
||
// initial center (Flutter will call setCenter after load, but still notify)
|
||
notifyReady();
|
||
} else {
|
||
setTimeout(waitMap, 300);
|
||
}
|
||
} catch(e) {
|
||
console.error('waitMap error', e);
|
||
}
|
||
})();
|
||
|
||
// 导出 API
|
||
window.setMarkersFromFlutter = setMarkersFromFlutter;
|
||
window.setCenter = setCenter;
|
||
</script>
|
||
</body>
|
||
</html>
|
||
''';
|
||
}
|
||
|
||
String _escapeForJs(String s) => s.replaceAll(r'\', r'\\').replaceAll("'", r"\\'").replaceAll('\n', r' ');
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
|
||
_controller = WebViewController()
|
||
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
||
..addJavaScriptChannel('Bridge', onMessageReceived: _onJsMessage)
|
||
..setNavigationDelegate(NavigationDelegate(
|
||
onPageFinished: (url) {
|
||
_pageLoaded = true;
|
||
_startReadyTimer();
|
||
// inject initial center & markers AFTER slight delay to allow JS to define functions
|
||
Future.delayed(const Duration(milliseconds: 300), () async {
|
||
await _controller.runJavaScript('setCenter(${widget.latitude}, ${widget.longitude}, ${widget.zoom});');
|
||
final coversJson = jsonEncode(widget.covers);
|
||
await _controller.runJavaScript("setMarkersFromFlutter('${_escapeForJs(coversJson)}');");
|
||
});
|
||
},
|
||
onWebResourceError: (err) {
|
||
_reportError('WebResourceError: ${err.description}');
|
||
},
|
||
))
|
||
..loadHtmlString(_html(widget.ak));
|
||
}
|
||
|
||
void _startReadyTimer() {
|
||
_readyTimer?.cancel();
|
||
_readyTimer = Timer(widget.readyTimeout, () {
|
||
if (!mounted) return;
|
||
if (!_mapReady) {
|
||
setState(() {
|
||
_showError = true;
|
||
_errorText = '地图初始化超时，可能 AK 无效或网络受限。请检查 AK（需为百度 JS API Key）与网络。';
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
void _onJsMessage(JavaScriptMessage msg) {
|
||
_lastJsMessage = msg.message;
|
||
// 解析 message
|
||
try {
|
||
final m = jsonDecode(msg.message);
|
||
if (m is Map && m.containsKey('__mapReady') && m['__mapReady'] == true) {
|
||
// JS 报告地图已 ready
|
||
_readyTimer?.cancel();
|
||
if (mounted) {
|
||
setState(() {
|
||
_mapReady = true;
|
||
_showError = false;
|
||
_errorText = '';
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
} catch (_) {
|
||
// not json meta, maybe marker data or console log
|
||
}
|
||
|
||
// handle console / error wrapper shape: {__bridge:true, kind:..., msg:...}
|
||
try {
|
||
final decoded = jsonDecode(msg.message);
|
||
if (decoded is Map && decoded['__bridge'] == true) {
|
||
final kind = decoded['kind'];
|
||
final mm = decoded['msg'];
|
||
if (kind == 'error' || kind == 'onerror') {
|
||
_reportError('JS error: $mm');
|
||
} else {
|
||
// console log: keep last message (debug only)
|
||
debugPrint('JS log: $mm');
|
||
}
|
||
return;
|
||
}
|
||
} catch (_) {}
|
||
|
||
// otherwise treat as marker click payload (likely non-meta JSON)
|
||
try {
|
||
final payload = jsonDecode(msg.message) as Map<String, dynamic>;
|
||
if (widget.onMarkerTap != null) widget.onMarkerTap!(payload);
|
||
} catch (e) {
|
||
// not JSON? ignore
|
||
debugPrint('Unrecognized JS message: ${msg.message}');
|
||
}
|
||
}
|
||
|
||
void _reportError(String text) {
|
||
debugPrint(text);
|
||
if (!mounted) return;
|
||
setState(() {
|
||
_showError = true;
|
||
_errorText = text;
|
||
});
|
||
}
|
||
|
||
@override
|
||
void didUpdateWidget(covariant BaiduMapWebView oldWidget) {
|
||
super.didUpdateWidget(oldWidget);
|
||
if (_pageLoaded) {
|
||
if (oldWidget.latitude != widget.latitude ||
|
||
oldWidget.longitude != widget.longitude ||
|
||
oldWidget.zoom != widget.zoom) {
|
||
_controller.runJavaScript('setCenter(${widget.latitude}, ${widget.longitude}, ${widget.zoom});');
|
||
}
|
||
if (!listEquals(oldWidget.covers, widget.covers)) {
|
||
final coversJson = jsonEncode(widget.covers);
|
||
_controller.runJavaScript("setMarkersFromFlutter('${_escapeForJs(coversJson)}');");
|
||
}
|
||
}
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_readyTimer?.cancel();
|
||
super.dispose();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Stack(
|
||
children: [
|
||
WebViewWidget(controller: _controller),
|
||
if (!_mapReady && !_showError)
|
||
const Center(child: CircularProgressIndicator()),
|
||
if (_showError)
|
||
Positioned.fill(
|
||
child: Container(
|
||
color: Colors.white70,
|
||
child: Center(
|
||
child: Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 20.0),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text('地图加载失败', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
|
||
const SizedBox(height: 8),
|
||
Text(_errorText, textAlign: TextAlign.center),
|
||
const SizedBox(height: 12),
|
||
ElevatedButton(
|
||
onPressed: () {
|
||
setState(() {
|
||
_showError = false;
|
||
_mapReady = false;
|
||
});
|
||
// 重新加载页面
|
||
_controller.loadHtmlString(_html(widget.ak));
|
||
},
|
||
child: const Text('重试'),
|
||
),
|
||
const SizedBox(height: 6),
|
||
ElevatedButton(
|
||
onPressed: () {
|
||
// 把最后一条 js message 展示出来，便于你贴错误给我
|
||
showDialog(
|
||
context: context,
|
||
builder: (_) => AlertDialog(
|
||
title: const Text('JS 消息'),
|
||
content: SingleChildScrollView(child: Text(_lastJsMessage ?? '无')),
|
||
actions: [
|
||
TextButton(onPressed: () => Navigator.pop(context), child: const Text('关闭')),
|
||
],
|
||
),
|
||
);
|
||
},
|
||
child: const Text('查看 JS 日志'),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
}
|