javascript - 使用带有 react-intersection-observer 的谷歌地图 google-maps-react npm 包来增加灯塔分数

问题描述

我正在努力提高我正在建设的 Gatsby 网站的灯塔分数。它要求我做的一件事是推迟我使用 gatsby 图像插件完成的屏幕外图像。然而，谷歌地图正在加载它要求延迟的图像，因为它位于页脚中。我正在使用这个 npm 包来加载地图https://www.npmjs.com/package/google-maps-react

所以我尝试使用 npm 包react-intersection-observer并在视图中/不在视图中时显示/隐藏整个地图组件。

我遇到的问题是这将我的灯塔得分提高了大约 5 分。但是地图不再加载我在默认为 sanfransico 的组件中输入的坐标。我认为这是因为它加载较晚。解决此问题的解决方案是什么？

这是我的钩子代码

//**********Google Maps Variables*****/

const [ref, inView, entry] = useInView({
  /* Optional options */
  threshold: 0,
})

const style = {
  width: '100%',
  height: '400px',
  position: 'relative',
}

const coords = { lat: 53.541581, lng: -113.295608 };




//**********Google maps varaibles end*** */

这是我的组件代码

      <Footer ref={ref} className="copyright">

        {inView &&

        <GoogleMap >
        <Map 
          google={window.google} 
          style={style} 
          containerStyle={style}
          center={{
            lat: 53.541581,
            lng:-113.295608
          }}
          zoom={12}
          mapTypeControl={false}

        >
          <Marker
          title={'Glen Alen Recreation Center'}
          name={'GARC'}
          position={{lat: 53.530358, lng: -113.282250}} />
          <Marker
          title={'Millenium Place'}
          name={'Millenium'}
          position={{lat: 53.559414, lng: -113.314161}} />
            <Circle
        radius={3900}
        center={coords}
        strokeColor='transparent'
        strokeOpacity={0}
        strokeWeight={5}
        fillColor='#30cefd'
        fillOpacity={0.2}
      />
          </Map>
        </GoogleMap>


       }

      </Footer>

更新

我尝试将坐标变量直接移动到组件中，但仍然没有区别，嗯...

更新#2

因此，如果我导航到它们，我的标记和圆圈就会显示出来，但是在使用此交叉点观察器时，默认的起始位置中心 lat 和 lng 不正确，如果我删除了 inView，它是正确的。

更新#3

我尝试的最后一件事是像在示例中那样从道具加载地图，因为我使用的是 window.properties。我试过这个<Map google={props.google}>。我删除了this因为 props 可以从功能组件中单独使用。然而，道具作为一个对象存在，但 props.google 没有，所以它只是无休止地加载

标签： javascriptreactjsgoogle-mapsgatsby

javascript - 使用带有 react-intersection-observer 的谷歌地图 google-maps-react npm 包来增加灯塔分数

问题描述

解决方案

推荐阅读