我试图把一个谷歌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嵌入的方式,我试图使用它?
1条答案
按热度按时间mepcadol1#
HTMLWidget可以完美地读取iframe标签,但是如果src值是Google Maps嵌入的直接URL,它会给予我们一个错误。我的解决方案是创建一个完整的页面,其中只包含Google Maps嵌入式iframe。在iframe的URL中,我使用了这个新页面的URL。
而不是:
我创建了一个googlemaps.html文件,然后使用URL作为iframe的src属性的值(例如:{url}/googlemaps.html):
我的新iframe标签: