2

为了清楚起见，我正在使用 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 不会触发。所以当我点击标记时。什么都没发生。我的控制台上什么也没有发生。我不确定我做错了什么。任何帮助将不胜感激。

4

1 回答 1

0

那只是因为<Marker />组件不能onClick作为道具。相反，您应该使用他们的道具添加一个onChildClickto<GoogleMapReact />并确定哪个孩子。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>
于 2021-08-15T18:34:05.697 回答