React-将道具嵌入到iframe url中

Question

<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 COORD呈现到iframe fine下的页面

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

我想这可能很容易做到，但似乎不能将它们嵌入到URL中。TIA

Answer 1

您可以使用模板文字。只需像这样更新代码：

<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/>

我们有两种选择：

这是一个用于集成Google地图的React组件。它是相当简单和高效的。从这里查一下。

const API_KEY = "Your_API_KEY_Here"

class Map extends React.Component {
  render() {
    return (
      <iframe name="gMap" src={`https://www.google.com/maps/embed/v1/place?q=${this.props.location.lat},${ this.props.location.lng}&key=${API_KEY}`}></iframe>
    )
  }
}