首页 > 解决方案 > 我可以使用 HTML 小部件来解析嵌入的谷歌地图吗?

问题描述

我正在尝试使用颤振在我的应用程序中放置一个谷歌地图,所以我尝试使用HTML 小部件来解析一个iframe包含来自谷歌地图的嵌入链接的一个,即使我使用的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

那么甚至可以按照我尝试使用的方式嵌入谷歌地图吗?

标签: flutterdart

解决方案


推荐阅读