Api 反应-将道具嵌入iframe url

我是一个新手，尝试将api中的经度和纬度嵌入到GoogleMaps iframe中

<br />  
<iframe name="gMap" src ="https://maps.google.com/maps?q={ this.props.venue.selectedVenue.location.lat },{ this.props.venue.selectedVenue.location.lng }&hl=es;z=14&amp;output=embed"></iframe>
<br />

lng、lat坐标渲染到iframe下的页面

Lat: { (this.props.venue.selectedVenue) ? this.props.venue.selectedVenue.location.lat : '' }
<br />
Lng: { (this.props.venue.selectedVenue) ? this.props.venue.selectedVenue.location.lng : '' }

Lat:{（this.props.venture.selectedVenue）？this.props.venue.selectedVenue.location.Lat:“”


Lng:{（this.props.vention.selectedvention）？this.props.venue.selectedVenue.location.Lng:'}

---

我认为这可能很容易做到，但似乎无法将它们嵌入到url中。TIA

您想在此处使用反引号：

src=”https://maps.google.com/maps?q={this.props.venue.selectedVenue.location.lat}，{this.props.venue.selectedVenue.location.lng}&hl=es；z=14&；output=embed“

变为：

src=`https://maps.google.com/maps?q=${this.props.venue.selectedVenue.location.lat}，${this.props.venue.selectedVenue.location.lng}&hl=es；z=14&；output=embed`

（另外，在

src

和

=

之间没有空格）

您可以使用。只需按如下方式更新代码：

<br/>  
    <iframe name="gMap" 
      src={`https://maps.google.com/maps?q=${this.props.venue.selectedVenue.location.lat},
        ${this.props.venue.selectedVenue.location.lng}&hl=es;z=14&amp;output=embed`}></iframe>
<br/>

我创建了一支笔来显示一个示例。只需将API密钥设置为

API\u KEY

const。这是它的名字。它在工作，你可以玩它

---

注意：您必须为谷歌地图嵌入服务创建一个API密钥

这最终解决了问题。Tnx感谢Alix&Duckedevkek让我走上了正确的道路

<br />
<iframe name="gMap" src={`https://www.google.com/maps/embed/v1/place?q=${ (this.props.venue.selectedVenue) ? this.props.venue.selectedVenue.location.lat : '' },${ (this.props.venue.selectedVenue) ? this.props.venue.selectedVenue.location.lng : '' }&key=YOUR_GOOGLE_MAPS_API_KEY`}></iframe>
<br />

你到底想做什么？请尽量说得更具体些。谢谢。我正试图根据从api获取的数据在页面上显示谷歌地图的位置。数据呈现良好，除非我尝试将其嵌入GoogleMapURL.Tnx堆中。Atom中的代码立即看起来更好，但出现了错误未捕获错误：模块构建失败：SyntaxError:JSX值应该是表达式或带引号的JSX文本（109:73）。这（109:73）发生在src.Tnx之后的等号上。我使用了它，但它似乎丢失了location-Search.js:110 uncaughttypeerror:无法读取null的属性'location'，这意味着

this.props.venue.selectedVenue

是

null

。调试代码以检查

render

方法中的

this.props.venue.selectedVenue

的值。因为这个代码在语法上是正确的@StevTnx Alix。不确定为什么它不会在那里显示，但会在iframe之外显示。如果没有lat，lng数据可用，我将其修改为取消src={{{（this.props.venture.selectedVenue）？this.props.venue.selectedVenue.location.lat:'}…它确实嵌入了坐标，但在后面附加了多个+。错误消息-拒绝在帧中显示“”，因为它将“X-frame-Options”设置为“sameorigin”。将显示lng、lat和map的硬编码fine@Stev请参阅我更新的答案和代码笔示例。Tnx堆Alix，感谢您的帮助-在添加常量时出现各种错误，我最终得到了g通过使用

<br />
<iframe name="gMap" src={`https://www.google.com/maps/embed/v1/place?q=${ (this.props.venue.selectedVenue) ? this.props.venue.selectedVenue.location.lat : '' },${ (this.props.venue.selectedVenue) ? this.props.venue.selectedVenue.location.lng : '' }&key=YOUR_GOOGLE_MAPS_API_KEY`}></iframe>
<br />