上下文
我正在尝试在Flutter Web中使用OpenStreetMap(带有OpenLayers(，但是我发现所有插件目前仅适用于IOS或Android。
我所取得的成就
我找到了一种在 Flutter Web 中显示地图的方法，其中包含dart:html和IFrameElement. 这是我在Dart中的小部件代码：
import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
class MapView extends StatefulWidget {
MapView({Key key}) : super(key: key);
@override
_MapViewState createState() => _MapViewState();
}
class _MapViewState extends State<MapView> {
String createdViewId = 'hello-world-html';
html.Element _iframe = html.IFrameElement()
..width = '400'
..height = '400'
..src = "http://localhost:80/dist"
..style.border = '1';
@override
void initState() {
super.initState();
// ignore: undefined_prefixed_name
ui.platformViewRegistry
.registerViewFactory(createdViewId, (int viewId) => _iframe);
}
@override
Widget build(BuildContext context) {
return Container(
width: 400,
child: HtmlElementView(
viewType: createdViewId,
));
}
}
这是我用来构建地图的index.js文件
import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import Point from 'ol/geom/Point';
import { Tile, Vector as VectorLayer } from 'ol/layer';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';
import { Icon, Style } from 'ol/style';
import {fromLonLat} from 'ol/proj';
var lonLat = [4.89, 44.93];
var lonLatFR = [2.213749, 46.227638];
var iconFeature = new Feature({
geometry: new Point(fromLonLat(lonLat)),
name: 'Valence',
population: 4000,
rainfall: 500
});
var iconStyle = new Style({
image: new Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'icon.svg',
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new VectorSource({
features: [iconFeature]
});
var vectorLayer = new VectorLayer({
source: vectorSource
});
var rasterLayer = new Tile({
source: new OSM()
});
var map = new Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new View({
center: fromLonLat(lonLatFR),
zoom: 5
})
});
var element = document.getElementById('popup');
var popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -50]
});
map.addOverlay(popup);
// display popup on click
jQuery.noConflict();
map.on('click', function (evt) {
window.top.postMessage("SEND ME !!", "*");
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
jQuery(element).popover({
placement: 'top',
html: true,
content: feature.get('name')
});
jQuery(element).popover('show');
} else {
jQuery(element).popover('destroy');
}
});
// change mouse cursor when over marker
map.on('pointermove', function (e) {
if (e.dragging) {
jQuery(element).popover('destroy');
return;
}
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
最后，这是我从Dart请求的index.html文件 (http://localhost:80/dist(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Icon Symbolizer</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.map {
width: 400px;
height: 400px;
margin: auto
}
</style>
</head>
<body>
<div id="map" class="map">
<div id="popup"></div>
</div>
<script src="index.js"></script>
</body>
</html>
我的问题
这个解决方案不仅不是很漂亮，而且我需要将数据从JS发回Flutter。事实上，这个想法是我的地图上将有多个标记，我需要知道用户选择了哪些标记。
我已经看到可以使用WebView Flutter插件(JavascriptMessage(来做到这一点，但同样，它仅适用于IOS或Android。所以我试图通过从 Javascript 发送postMessage来做到这一点，但我没有找到我应该在 Flutter 中收听此消息的位置。
以下是 Flutter for Web 中的 Maps 示例：http：//flutter_for_web_maps.codemagic.app/- 所以你需要做的是使用flutter_map插件，并将所有依赖于特定于平台的实现的依赖项替换为支持 Web 的依赖项。
看起来有一个支持网络的新包：https://pub.dev/packages/easy_google_maps - 试一试。