时间戳

首页 > 解决方案 > 如何在 Reactjs 中的谷歌地图上嵌入一个确切的位置

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

问题描述

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

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

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

如果我将带有这样嵌入位置的链接复制 <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;

标签： javascriptreactjsgoogle-mapsgoogle-maps-markers

解决方案

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

下面是一个示例代码和代码片段：

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"));

推荐阅读