Map in Flutter for Web - 将数据从 JS 发送到 Flutter for Web答案

【问题标题】：Map in Flutter for Web - Send data from JS to Flutter for WebMap in Flutter for Web - 将数据从 JS 发送到 Flutter for Web
【发布时间】：2020-01-29 01:45:03
【问题描述】：

背景

我正在尝试在 Flutter Web 中使用 OpenStreetMap（带有 OpenLayers），但我发现的所有插件目前仅适用于 IOS 或 Android。

我所取得的成就

我找到了一个 way 来在 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 (http://localhost:80/dist) 请求的 index.html 文件

<!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 dart dart-html

【解决方案1】：

这是 Flutter for Web 中的 Maps 示例：http://flutter_for_web_maps.codemagic.app/ - 所以您需要做的是使用 flutter_map 插件并将所有依赖于平台特定实现的依赖项替换/更改为支持 Web 的依赖项。

好像有一个支持 web 的新包：https://pub.dev/packages/easy_google_maps - 试试看。

【讨论】：