Flutter：带有图像叠加的地图答案

【问题标题】：Flutter: Map with image overlayFlutter：带有图像叠加的地图
【发布时间】：2019-10-28 12:25:28
【问题描述】：

我实际上正在开发一个 Web 项目，其中显示地图（传单）并带有叠加层中的图像。在 Web 应用程序上，用户可以移动图像以与 Leaflet 地图上的建筑物指纹完全匹配。放置图像后，由于图像 3 个角的 3 个 GPS 坐标，我们能够存储图像的确切位置。

现在，我想在移动应用程序中使用地图上的 3 个角坐标添加此图像。我对 Flutter 很感兴趣，但在继续之前，我想知道这个实现是否可以使用 Flutter。

这是放置在网络应用程序上的图像示例：

这是与图像关联的 3 个角坐标的示例：

"corner1": {
       "type": "Point",
       "coordinates": [48.44125015626304, -4.412910623650533]
},
"corner2": {
       "type": "Point",
       "coordinates": [48.44194275959914, -4.412734794896097]
},
"corner3": {
        "type": "Point",
        "coordinates": [48.441223035155275, -4.412648068391719]
}

因此，在全球范围内，我想在移动应用程序的这些确切位置显示叠加图像，如果可能的话，使用 Flutter。

【问题讨论】：

没有真正回答您的问题，但您可以使用 2 个对角而不是 3 个来定义矩形。使用flutter_map插件绝对可以做到这一点，但需要你做一些编码。

标签： google-maps dictionary flutter mapbox flutter-layout

【解决方案1】：

Flutter 有一个 WebView，您可以在其中显示 Leaflet 地图。我已经通过 Cordova 在移动设备上使用了 Leaflet，如果您更喜欢使用 Leaflet 而不是使用 Google 地图，那么您可以在 WebView 中使用 Leaflet。

我不知道 WebView 的抖动速度有多快，但希望它能够获得与使用 Cordova 相似的性能，这对于您的应用程序来说看起来会获得足够好的性能。

如果您有大量矢量数据要在移动设备上呈现，可能会引起麻烦。然后，您需要在 Leaflet 地图使用的切片服务器中进行渲染。

【讨论】：

【解决方案2】：

Flutter google_maps_plugin 中的地图插件现在似乎支持多边形，如本次提交 polygon overlays 中所示。这将帮助您实现该图像叠加。希望对您有所帮助！

检查这个例子：polygons

【讨论】：