如何在 React 中使用 google-map-react 制作静态地图？

Question

我有这个 ：

 <GoogleMapReact
      bootstrapURLKeys={{ key: 'key' }}
      defaultCenter={center}
      defaultZoom={zoom}
>
  <TacoMarker
   link={shop.id}
   lat={latitude}
   lng={longitude}
  />

 </GoogleMapReact>

我可以给你什么道具？它会像scrollEnabled = {false}吗？

Answer 1

google-map-react编写为使用Maps JavaScript API。请注意，Maps JavaScript API 与Maps Static API不同。如果你想在你的 React 代码中显示静态地图，你可以直接将Maps Static API URLsrc放在标签的参数中<img/>。

这是一个示例代码片段：

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

function App() {
  return (
    <div>
      <h1>Static Maps Sample</h1>
      <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY"/>   
    </div>
  );
}

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