Question

我使用的是react-google-maps包，当离开包含地图的页面时，我收到错误消息：

Uncaught TypeError: Cannot read property 'overlayMouseTarget' of null

以下是GoogleMap组件的代码：

const GMap = withGoogleMap((props) => (
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={12}
    zoom={props.zoom}
    onDragEnd={props.onZoomChanged}
    onZoomChanged={props.onZoomChanged}
    defaultCenter={props.defaultCenter}
    center={props.center}
  >
    {
      props.markers && props.markers.map((data, index) => (
        <OverlayView
          key={index}
          position={{
            lat: data.get('loc').get('geo').get('lat'),
            lng: data.get('loc').get('geo').get('lng'),
          }}
          mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
          getPixelPositionOffset={(width, height) => ({ x: -(width / 2), y: -(height) })}
        >
          <WnmMarker
            text={data.get('text')}
            highlight={data.get('highlight')}
          />
        </OverlayView>
      ))
    }
  </GoogleMap>
));

有人能指出我可能造成这种情况的原因吗？

谢谢！

Answer 1

当您离开页面时，地图元素不再存在，但绑定到它的事件仍然存在！

根据React Component Life Cycle，我们可能希望在您的组件中有以下一对： componentDidMount 和* componentWillUnmount *

#! /bin/bash                                                                                   

nlines=10000                                                                                   
input=$1                                                                                       
output=$2                                                                                      

# use a unique prefix!                                                                         
prefix='tmpsplit'                                                                              
split --lines=$nlines $input $prefix                                                           

outfiles=()                                                                                    
# Assume we only split to a maximum of 26^2 files
# This is the default for split anyway                                              
for filename in ${prefix}??                                                                    
do                                                                                             
        outfile="${filename}-out"                                                              
        ./calcdist.py $filename $outfile                                                      
done                                                                                           

# This assumes the shells orders the glob expansion alphabetically                             
cat ${prefix}*out > $output                                                                    

# Clean up                                                                                     
rm ${prefix}*

我不知道您是否已经拥有上述对以初始化您的地图及其活动。

但是，仍然有很多谷歌地图库，但不确定所有这些都根据反应组件生命周期处理所有事件。下面还有另一个，我也有基于它的简单指南：

我的导游：

Implementing google maps with react

How to incorporate <script> in React to add Google Maps instance

图书馆： https://github.com/istarkov/google-map-react

如果这仍然不是您想要的，请随时发布更多代码供您参考，然后我们可以一起找到最佳方式

react-google-maps Uncaught TypeError：无法读取属性＆＃39; overlayMouseTarget＆＃39;为null

1 个答案: