reactjs - 使用 Maps JavaScript API 将 Google map 添加到 GatsbyJS

Question

我正在尝试使用 Google Maps JavaScript API 将 map 添加到我的 Gatsby 项目中。

我是 customizing Gatsby html.js通过默认副本的副本:

cp .cache/default-html.js src/html.js

然后，根据 Google Maps Hello World example ，经过一番谷歌搜索，我发现我需要使用 dangerouslySetInnerHTML并在我关闭 </body> 之前添加以下内容在那个新的 html.js 中添加标签:

<script dangerouslySetInnerHTML={{
    __html: `
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    `
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"
async defer></script>

(显然，将 MY_KEY 替换为我的实际 API key )

然后我创建了一个空的 <div id="map"></div>在我的 React 组件中。

这行得通……有点。如果我导航离开，并返回到带有 map 的页面，它就会消失。如果我重新加载它所在的页面，我只能看到 map 。

有任何想法吗？

Answer 1

这是我用来将 Google Maps 放入我的 Gatsby 构建的实现:

import React from 'react';
import GoogleMapReact from 'google-map-react';

const isClient = typeof window !== 'undefined';

export const GoogleMap = (props) => {
  const {
    address,
    googleMapsApiKey
  } = props;
  const lat = parseFloat(address.lat);
  const lng = parseFloat(address.lng);
  return (
    <section className="google-map">
      <div className="map">
        { isClient && (
          <GoogleMapReact
            bootstrapURLKeys={{ key: googleMapsApiKey }}
            defaultCenter={[lat, lng]}
            defaultZoom={14}
          >
            <div
              className="marker"
              lat={lat}
              lng={lng}
            />
          </GoogleMapReact>
        )}
      </div>
    </section>
  );
}

注意 isClient条件渲染很重要，因此 google-map-react不会破坏你的 Gatsby 构建!