Question

我是新手做出反应并尝试将经度和纬度从api嵌入谷歌地图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 coords渲染到iframe精细

下的页面

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

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

Answer 1

您可以使用Template Literals。只需更新您的代码：

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

更新

我们有两种选择：

React Google Maps

这是用于整合Google地图的React组件。它非常简单有效。检查来自here。

Goole Maps嵌入Api

要解决sameorigin问题，我们可以使用Embed Api for Google Maps。您所要做的就是生成API_KEY。然后：

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>
    )
  }
}

我创建了一支笔来展示一个例子。只需将API KEY设置为API_KEY const即可。这是link。它正在工作你可以玩它。

注意：您必须为Google Maps嵌入服务创建API密钥

Answer 2

你想在这里使用反引号：

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和=之间也没有空格）

Answer 3

这最终解决了这个问题。 Tnx to Alix＆amp; DrunkDevKek让我走上了正确的道路

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

React - 将道具嵌入iframe网址

3 个答案:

更新

React Google Maps

Goole Maps嵌入Api