reactjs - 如何在 react.js 中使用谷歌地图 iframe 嵌入代码
问题描述
我正在使用 react.js。我必须在我的联系我们页面上显示地图,所以我添加了从谷歌地图获得的 iframe 嵌入代码。我正在使用下面的代码。我没有使用任何 API。
import React from 'react';
const AddressMap=()=>{
return(
<div className="google-map-code">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15282225.79979123!2d73.7250245393691!3d20.750301298393563!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1587818542745!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
);
}
export{AddressMap}
我的页面出现错误
错误:
style
prop 需要从样式属性到值的映射,而不是字符串。例如,使用 JSX 时 style={{marginRight: spacing + 'em'}}。
你能帮我解决这个问题吗?
解决方案
在反应风格中需要一个对象。例如:style={{border:0}}
import React from 'react';
const AddressMap=()=>{
return (
<div className="google-map-code">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15282225.79979123!2d73.7250245393691!3d20.750301298393563!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1587818542745!5m2!1sen!2sin" width="600" height="450" frameborder="0" style={{border:0}} allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
);
}
export{AddressMap}
推荐阅读
- python - 如何从存储在元组列表列表中的两个元素元组中创建两个列表
- javascript - 如何在此弹出窗口上获取/查看选定的文本,?所以这可以看出将要分享什么文本
- swift - 我正在尝试更改搜索控制器搜索栏文本字段的占位符文本颜色
- reactjs - 我应该将我的 node_modules 文件夹签入我的代码存储库吗?
- flutter - 如何从一个飞镖文件访问另一个方法?
- java - Spring Security:如何在注销时撤销刷新令牌?
- python - PyQt5中奇怪显示的图像加载
- python-3.x - 在列表中分组相似的月份和年份
- java - 如何在 Java 中使用 Base64 进行哈希加密和解密
- abap - SAP Gateway - XML-ABAP 转换的意外文本