Skip to content

A
amap_flutter_map
提交 ae2e7b48 authored 作者: 史晓晨's avatar 史晓晨
浏览文件
操作

feat：调试web地图展示；

上级 25cd4a92
隐藏空白字符变更
内嵌 并排
正在显示 包含 237 行增加 和 2 行删除
example/.gitignore
浏览文件 @ ae2e7b48
......@@ -32,7 +32,6 @@
/build/
# Web related
lib/generated_plugin_registrant.dart
# Symbolication related
app.*.symbols
......
example/web/index.html 0 → 100644
浏览文件 @ ae2e7b48
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Demonstrates how to use the test_web_plugin plugin.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="test_web_plugin_example">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>test_web_plugin_example</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
const serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
<script src="https://webapi.amap.com/loader.js"></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine().then(function(appRunner) {
appRunner.runApp();
});
}
});
});
</script>
</body>
</html>
example/web/manifest.json 0 → 100644
浏览文件 @ ae2e7b48
{
"name": "test_web_plugin_example",
"short_name": "test_web_plugin_example",
"start_url": ".",
"display": "standalone",
"background_color": "#0175C2",
"theme_color": "#0175C2",
"description": "Demonstrates how to use the test_web_plugin plugin.",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "icons/Icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/Icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
lib/src/core/method_channel_amap_flutter_map.dart
浏览文件 @ ae2e7b48
import 'dart:async';
import 'dart:html';
import 'dart:js_util';
import 'dart:typed_data';
import 'package:amap_flutter_base/amap_flutter_base.dart';
......@@ -7,11 +9,16 @@ import 'package:amap_flutter_map/src/types/input_tips_result.dart';
import 'package:amap_flutter_map/src/types/poi_result.dart';
import 'package:amap_flutter_map/src/types/regeocode_result.dart';
import 'package:amap_flutter_map/src/types/types.dart';
import 'package:amap_flutter_map/src/utils/platform_utils.dart';
import 'package:amap_flutter_map/src/web/amap.dart';
import 'package:amap_flutter_map/src/web/amap_loader.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
import 'package:stream_transform/stream_transform.dart';
import 'dart:ui' as ui;
import 'map_event.dart';
......@@ -120,6 +127,46 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
creationParams: creationParams,
creationParamsCodec: const StandardMessageCodec(),
);
} else if (PlatformUtils.isWeb) {
late DivElement _element;
/// 这里使用时间作为唯一标识
String _divId = DateTime.now().toIso8601String();
/// 先创建div并注册
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(_divId, (int viewId) {
/// 地图需要的Div
_element = DivElement()
..style.width = '100%'
..style.height = '100%'
..style.margin = '0';
return _element;
});
SchedulerBinding.instance.addPostFrameCallback((_) {
/// 创建地图
var promise = load(LoaderOptions(
key: 'f759e608583c169bb23d7817ed05583d',
version: '2.0',
plugins: ['AMap.Scale'],
));
promiseToFuture(promise).then((value) {
print('初始化成功');
MapOptions _mapOptions = MapOptions(
zoom: 13,
);
AMap aMap = AMap(_element, _mapOptions);
}, onError: (e) {
print('初始化错误：$e');
});
});
return HtmlElementView(
viewType: _divId,
onPlatformViewCreated: onPlatformViewCreated,
);
}
return Text('当前平台:$defaultTargetPlatform, 不支持使用高德地图插件');
}
......
lib/src/utils/platform_utils.dart 0 → 100644
浏览文件 @ ae2e7b48
import 'dart:io';
import 'package:flutter/foundation.dart';
/// 平台信息
class PlatformUtils {
static bool _isWeb() {
return kIsWeb == true;
}
static bool _isAndroid() {
return _isWeb() ? false : Platform.isAndroid;
}
static bool _isIOS() {
return _isWeb() ? false : Platform.isIOS;
}
static bool get isWeb => _isWeb();
static bool get isAndroid => _isAndroid();
static bool get isIOS => _isIOS();
}
lib/src/web/amap.dart 0 → 100644
浏览文件 @ ae2e7b48
@JS('AMap')
library amap;
import 'package:js/js.dart';
/**
* 这里`new Map(id)` 调用js的`new AMap.Map(id)
* new AMap.Map(div: (String | HTMLDivElement), opts: MapOptions)
*/
@JS('Map')
class AMap {
external AMap(dynamic /*String|HTMLDivElement*/ div, MapOptions opts);
}
@JS()
@anonymous
class MapOptions {
external factory MapOptions({
// 初始中心经纬度
LngLat center,
// 地图显示的缩放级别
num zoom,
// 地图视图模式, 默认为‘2D’
String /*‘2D’|‘3D’*/ viewMode,
});
}
@JS()
class LngLat {
external num getLng();
external num getLat();
external LngLat(num lng, num lat);
}
lib/src/web/amap_flutter_map_web.dart 0 → 100644
浏览文件 @ ae2e7b48
import 'package:amap_flutter_map/src/core/amap_flutter_platform.dart';
/**
* web地图
*/
class AmapFlutterMapWeb extends AMapFlutterPlatform {
AmapFlutterMapWeb();
static void registerViewFactory() {
AMapFlutterPlatform.instance = AmapFlutterMapWeb();
}
}
\ No newline at end of file
lib/src/web/amap_loader.dart 0 → 100644
浏览文件 @ ae2e7b48
@JS('AMapLoader')
library loader;
import 'package:js/js.dart';
/// 高德地图 Loader js
external load(LoaderOptions options);
@JS()
@anonymous
class LoaderOptions {
external factory LoaderOptions({
///您申请的key值
String key,
/// JSAPI 版本号
String version,
//同步加载的插件列表
List<String> plugins,
});
}
pubspec.yaml
浏览文件 @ ae2e7b48
......@@ -16,6 +16,8 @@ dependencies:
stream_transform: ^2.0.0
amap_flutter_base: ^3.0.0
js: ^0.7.1
dev_dependencies:
flutter_test:
sdk: flutter
......@@ -23,7 +25,7 @@ dev_dependencies:
# https://github.com/dart-lang/pub/issues/2101 is resolved.
flutter_driver:
sdk: flutter
test: ^1.16.5
# test: ^1.16.5
pedantic: ^1.11.0
mockito: ^5.0.0-nullsafety.7
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论