google-map-react标记onclick不工作

Question

为了清楚起见，我使用的是react-google-map https://www.npmjs.com/package/google-map-react

我清楚地遵循了文档，我能够让它工作。这是我的代码。

import React from 'react';
import GoogleMapReact from 'google-map-react';
import {Avatar, Box, Text, useColorModeValue, VStack} from "@chakra-ui/react";

const Marker = ({text}) => (
    <VStack alignItems={'center'}>
        <Avatar backgroundColor={useColorModeValue('#5125b6', '#99c3ff')} w={5} h={5} name={' '}/>
        <Text>{text}</Text>
    </VStack>
);
function Map() {
    return (
        <Box mt={5} style={{height: '60vh', width: '100%'}}>
            <GoogleMapReact
                bootstrapURLKeys={{key: 'mymapskey'}}
                defaultCenter={[0, 0]}
                defaultZoom={2}
            >
                <Marker
                    lat={59.955413}
                    lng={30.337844}
                    text="hehe"
                    onClick={console.log('haha')}
                />
            </GoogleMapReact>
        </Box>
    );
}

export default Map;

出于某种原因。标记onClick不会触发。所以当我点击标记的时候。什么都没发生。我在我的主机上看不到任何东西。我不确定我做错了什么。任何帮助都将不胜感激。

Answer 1

这很简单，因为<Marker />组件不能将onClick作为道具。相反，您应该向<GoogleMapReact />添加一个onChildClick，并使用它们的key属性来确定是哪个子级。

<GoogleMapReact
  bootstrapURLKeys={{ key: 'mymapskey' }}
  defaultCenter={[0, 0]}
  defaultZoom={2}
  onChildClick={(key) => console.log(key, 'haha')}
>
  <Marker lat={59.955413} lng={30.337844} key="your-key-for-this-marker" />
</GoogleMapReact>