0

我正在尝试使用Google-map-react包在 Google 地图中的标记旁边显示文本。但是没有文本是可见的，只有标记本身出现。这是我的代码：

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import marker from './marker.png';
import { geolocated } from 'react-geolocated';
const AnyReactComponent = ({ place }) =>  (
    <div>
    <div> {place} </div> // where text should be
        <img src={marker} style={{ height: '50px', width: '40px',     position: 'relative',
    left: '-600px',
    top: '-500px'}} />
    </div>
);



const ExampleMapStyles =
    [
        {
            "featureType": "all",
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "saturation": 36
                },
                {
                    "color": "#000000"
                },
                {
                    "lightness": 40
                }
            ]
        },
        {
            "featureType": "all",
            "elementType": "labels.text.stroke",
            "stylers": [
                {
                    "visibility": "on"
                },
                {
                    "color": "#000000"
                },
                {
                    "lightness": 16
                }
            ]
        },
        {
            "featureType": "all",
            "elementType": "labels.icon",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "administrative",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 20
                }
            ]
        },
        {
            "featureType": "administrative",
            "elementType": "geometry.stroke",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 17
                },
                {
                    "weight": 1.2
                }
            ]
        },
        {
            "featureType": "landscape",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 20
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 21
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 17
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 29
                },
                {
                    "weight": 0.2
                }
            ]
        },
        {
            "featureType": "road.arterial",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 18
                }
            ]
        },
        {
            "featureType": "road.local",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 16
                }
            ]
        },
        {
            "featureType": "transit",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 19
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#000000"
                },
                {
                    "lightness": 17
                }
            ]
        }
    ];


export default class Map extends Component {
    static defaultProps = {
        zoom: 13,
        center: {
            lat: 49.955413,
            lng: 30.337844
        }
    };
    state = {
        lati: 0,
        long: 0
    }
    //   compo() {
    //     console.log(this.props.center.latitude);
    //   }

    componentWillReceiveProps(nextProps) {

        this.setState({ lati: nextProps.center.lat, long: nextProps.center.lng }, () => { console.log("state", this.state) })


    }

    render() {
        return (
            <div className="google-map" style={{ width: '100%', height: '2000px', backgroundColor: 'red' }}>
                <GoogleMapReact
                    options={{
                        styles: ExampleMapStyles
                    }}
                    center={this.props.center} defaultZoom={this.props.zoom}>
                    {this.props.toShowMarker.length > 0 ?
                        this.props.toShowMarker.map((data) => {
                            return <AnyReactComponent
                                // lat: place.geometry.location.lat,
                                //  lng: place.geometry.location.lng
                                lat={data.lat}
                                place="ldld"
                                lng={data.lng}

                            />
                        }) : ''}

                </GoogleMapReact>
            </div>
        );
    }
}
4

1 回答 1

0

我认为您应该将“地点”更改为“文本”。

文档中的示例

<GoogleMapReact
  bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
  defaultCenter={this.props.center}
  defaultZoom={this.props.zoom}
  yesIWantToUseGoogleMapApiInternals
  onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
>
  <AnyReactComponent
    lat={59.955413}
    lng={30.337844}
    text="My Marker"
  />
</GoogleMapReact>

希望这可以帮助！

于 2019-09-04T09:19:19.000 回答