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

Question

我正在用 Reactjs 重做我的网站。我正在尝试在地图上嵌入一个带有评论的确切 google 地点，这样它看起来就像 this（我的网站是用 wordpress 编写的）

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

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

如果我像这样复制带有嵌入位置的 link <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> 进入我的函数，网站会崩溃。

这是我的 google 地图组件：

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;

Answer 1

您想要实现的屏幕截图中的地图在您的请求中使用了 Maps Embed API while the "react-google-maps" library in your code is using Maps JavaScript API. These APIs are different and if you want to achieve the one from your screenshot in Reactjs, you can put the directly inside the div that you want to display. You can generate the iframe of your place you can check this link. Just search for your place and it will generate the iframe. Please note that there's a key parameter in the iframe link. This means that you need to put an API key。

下面是 sample code 和代码片段：

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

function App() {
  return (
    <div>
      <h1>MAPS!</h1>
      <p>Please see map below</p>
      <iframe
        width="600"
        height="450"
        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"));

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

How to embed an exact place on google maps in Reactjs

javascript

google-maps

google-maps-markers

reactjs