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

Posted

技术标签:

【中文标题】Map in Flutter for Web - 将数据从 JS 发送到 Flutter for Web【英文标题】：Map in Flutter for Web - Send data from JS to 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 中收听此消息的位置。

【问题讨论】：

你找到解决办法了吗？ 【参考方案1】：

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

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

【讨论】：

以上是关于Map in Flutter for Web - 将数据从 JS 发送到 Flutter for Web的主要内容，如果未能解决你的问题，请参考以下文章

Flutter in WEB

如何将“Flutter for Web”转换为“Flutter for Mobile”？

js遍历集和(Array,Map,Set) (forEach, map, for, for...in, for...of)

for循环，foreach, map，reduce用法对比+for in，for of

for-in和for-of，forEach和Map

js中的各种遍历(forEach, map, for, for...in, for...of)