dart 我可以使用HTML widget来解析google maps embed吗?

gmxoilav  于 2023-09-28  发布在  Go
关注(0)|答案(1)|浏览(82)

我试图把一个谷歌Map在我的应用程序中使用flutter,所以我试图使用HTML小部件解析一个iframe,它包含来自谷歌Map的嵌入链接,即使我使用的是iframe,模拟器一直告诉我使用iframe。这是我的代码:

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:login/components/isFav_button.dart';
import 'package:login/constants.dart';

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stack(
            children: [
              Image.asset(
                'assets/images/cheeseCake.jpg',
                fit: BoxFit.cover,
              ),
              Positioned.fill(
                  child: Align(
                alignment: Alignment.topRight,
                child: FavoriteButton(),
              ))
            ],
          ),
          Text(
            'Description',
            style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.w600,
                fontFamily: 'Proxima',
                shadows: [
                  Shadow(
                      offset: Offset(3, 3),
                      blurRadius: 3,
                      color: navyBlue.withOpacity(0.5))
                ]),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 8, right: 6),
            child: Text(
              'Look no further for a creamy and ultra smooth classic cheesecake.' +
                  '\nPaired with a buttery graham cracker crust, no one can deny it' +
                  's simple decadence.',
              style: TextStyle(
                color: Colors.black,
                fontSize: 18,
                fontFamily: 'Proxima',
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          SizedBox(
            height: size.height * 0.01 / 2,
          ),
          Text(
            'Location',
            style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.w600,
                fontFamily: 'Proxima',
                shadows: [
                  Shadow(
                      offset: Offset(3, 3),
                      blurRadius: 3,
                      color: navyBlue.withOpacity(0.5))
                ]),
          ),
          Html(
            data:
                '''<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3453.6684889591766!2d31.232986914593635!3d30.046367225437855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1458418bb92b5ad9%3A0xe0a4c8f95a81ac3!2zTGEgcG9pcmUgQ2FmZSDZhNin2KjZiNin2LE!5e0!3m2!1sen!2seg!4v1626118298155!5m2!1sen!2seg" 
                    width="600" 
                    height="450" 
                    style="border:0;" 
                    allowfullscreen="" 
                    loading="lazy">
                    </iframe>''',
          ),
        ],
      ),
    );
  }
}

这是输出:

这是我的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^2.1.0
  webview_flutter: ^2.0.4
  cupertino_icons: ^1.0.2
  flutter_svg: ^0.22.0

调试控制台:

E/BufferQueueProducer(16410): [SurfaceTexture-0-16410-3] setAsyncMode: BufferQueue has been abandoned
E/BufferQueueProducer(16410): [SurfaceTexture-0-16410-3] cancelBuffer: BufferQueue has been abandoned
3
W/zygote  (16410): Attempt to remove non-JNI local reference, dumping thread
I/chatty  (16410): uid=10084(com.example.login) identical 1 line
5
W/zygote  (16410): Attempt to remove non-JNI local reference, dumping thread

那么,是否有可能使用一个谷歌Map嵌入的方式,我试图使用它?

mepcadol

mepcadol1#

HTMLWidget可以完美地读取iframe标签,但是如果src值是Google Maps嵌入的直接URL,它会给予我们一个错误。我的解决方案是创建一个完整的页面,其中只包含Google Maps嵌入式iframe。在iframe的URL中,我使用了这个新页面的URL。
而不是:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d40751.77874464102!2d-72.33276177560138!3d-50.32950924136887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xbdbb0cbeffd34161%3A0x5d60b0a2eef72a37!2sKayak+Santa+Cruz!5e0!3m2!1ses-419!2sar!4v1559132030636!5m2!1ses-419!2sar" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

我创建了一个googlemaps.html文件,然后使用URL作为iframe的src属性的值(例如:{url}/googlemaps.html):

<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Maps</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d40751.77874464102!2d-72.33276177560138!3d-50.32950924136887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xbdbb0cbeffd34161%3A0x5d60b0a2eef72a37!2sKayak+Santa+Cruz!5e0!3m2!1ses-419!2sar!4v1559132030636!5m2!1ses-419!2sar" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

我的新iframe标签:

<iframe src="{url}/googlemaps.html" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

相关问题