如何在 Reactjs 中的谷歌地图上嵌入一个确切的位置

Posted 2023-03-28

【中文标题】如何在 Reactjs 中的谷歌地图上嵌入一个确切的位置

【英文标题】：How to embed an exact place on google maps in Reactjs

【发布时间】：2021-05-16 18:55:12

【问题描述】：

我正在使用 Reactjs 重做我的网站。我正在尝试在地图上嵌入一个带有评论的确切谷歌位置，所以它看起来像 this（我的网站是用 wordpress 编写的）

到目前为止，我只能显示一个带有精确坐标的图钉，它看起来像 this

有没有办法在地图上嵌入确切的地点，因为评论对我的客户可见非常重要？

如果我要像这样复制带有嵌入位置的链接 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12063.71295670172!2d-72.388377!3d40.895389!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x46289ec3b50eabb9!2sMove%20Plus!5e0!3m2!1sen!2sus!4v1613186587593!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> 进入我的函数，网站会崩溃。

这是我的谷歌地图组件：

import React from "react";

import 
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
 from "react-google-maps";

const MapWrapper = withScriptjs(
  withGoogleMap((props) => (
    <GoogleMap
      defaultZoom=13
      defaultCenter= lat: 40.895436, lng: -72.388484 
    > 
      <Marker position= lat: 40.895436, lng: -72.388484  /> 
    </GoogleMap>
  ))
);

function MyMap() 

  return (
    <>
            <MapWrapper
              googleMapURL="https://maps.googleapis.com/maps/api/myAPIHere"
              loadingElement=<div style= height: `100%`  />
              containerElement=<div style= height: `100%`  />
              mapElement=<div style= height: `100%`  />
            />
    </>
  );


export default MyMap;

【参考方案1】：

您想要实现的屏幕截图中的地图使用Maps Embed API，而您代码中的“react-google-maps”库使用Maps javascript API。这些 API 是不同的，如果你想从 Reactjs 中的屏幕截图中实现一个，你可以将它直接放在你想要显示的 div 中。您可以生成您所在位置的 iframe，您可以查看此link。只需搜索您的位置，它就会生成 iframe。请注意，iframe 链接中有一个key 参数。这意味着您需要在请求中添加API key。

下面是sample code 和代码 sn-p：

import React from "react";
import ReactDOM from "react-dom";

function App() 
  return (
    <div>
      <h1>MAPS!</h1>
      <p>Please see map below</p>
      <iframe
        
        
        style= border: 0 
        loading="lazy"
        allowfullscreen
        src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ92pXbcOV6IkRuasOtcOeKEY&key=YOUR_API_KEY"
      />
    </div>
  );


ReactDOM.render(<App />, document.getElementById("root"));