如何在Flutter Web上使用Google Maps库? [英] How to use the Google Maps library with Flutter Web?

问题描述

我正在将一个Flutter移动项目移植到Web上，并且想知道如何在Flutter Web中使用Google Maps库.

I am porting over a flutter mobile project to flutter web and was wondering how to use the google maps library with Flutter Web.

推荐答案

如果需要使用该库，我发现了这种替代方法:

If you need to use the library, I found this alternative:

Widget getMap() {
String htmlId = "7";

final mapOptions = new MapOptions()
  ..zoom = 8
  ..center = new LatLng(-34.397, 150.644);

// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
  final elem = DivElement()
    ..id = htmlId
    ..style.width = "100%"
    ..style.height = "100%"
    ..style.border = 'none';

  new GMap(elem, mapOptions);

  return elem;
});

return HtmlElementView(viewType: htmlId);
}

我没有对其进行彻底的测试，但是它似乎可以绘制地图.

I didn't tested it thoroughly but it seems to render the map.

此解决方案的基本工作示例在此处:

A basic working example of this solution is here:

https://github.com/dazza5000/flutter_web_google_maps_example

创建了该项目的视频演练:

Created a video walk-through of the project:

https://www.youtube.com/watch?v=iW7pCBL7yWk

Barebones博客文章介绍解决方案:

Barebones blog article walking through solution:

http://whereisdarran.com/2020/01/google-maps-for-flutter-web/

这篇关于如何在Flutter Web上使用Google Maps库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！