Google Maps Javascript API 的问题，标记和折线在 React.js 应用程序上未同时显示

Question

I am pretty sure the states and setState stuff are correct, so here is my code. What I did here was I assigned the map key with the function this.initMap() . To have a detailed look:

class Radar extends Component{
    constructor(props){
        super(props)
        //initialize methods here
        this.googleMap = React.createRef()

        //define states here
        this.state = {
            cityname:this.props.datasource.name,
            cityCoordinates:[this.props.datasource.coord.lon, this.props.datasource.coord.lat],
            winddirection:this.props.datasource.wind.deg,
            cityPool:[],
            borderLine:[]
        }
}


initMap(){
    return new window.google.maps.Map(this.googleMap.current,{
        zoom: 7.5,
        center:{ lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
      disableDefaultUI: true,
    })
}

targetedCityMarker(){
    new window.google.maps.Marker({
        position: { lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
        map:this.initMap()
    })
}

cityPoolPolyLine(){
    let citypool_coordinates=[]
    this.state.cityPool.map((i)=>{
        citypool_coordinates.push(i.location)
        return citypool_coordinates
    })

    console.log(this.state.borderLine)   
    console.log(citypool_coordinates)    
    new window.google.maps.Polyline({
        path: this.state.borderLine,
        geodesic: true,
        strokeColor: "#2AA181",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map:this.initMap()
      });
}

componentDidMount(){
    axios.get('http://localhost:5000/weather/radar').then((res)=>{
        console.log(res.data)
        this.setState({
            cityPool:res.data
        })
    })

    axios.get('http://localhost:5000/weather/radar_2').then((res)=>{
        this.setState({
            borderLine:res.data
        })
    })

    const MapCode = document.createElement('script')
    MapCode.src =`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=&v=weekly`
    window.document.body.appendChild(MapCode)
    

    MapCode.addEventListener('load', ()=>{
        this.initMap()
        this.targetedCityMarker()
        setTimeout(()=>{
            this.cityPoolPolyLine()
        },4000)
    })
}
    
    render(){
        return(
            <div className='radar-page'>
                <h1>Weather Radar</h1>
                <p>City Name: {this.state.cityname}</p>
                <p>City Coordinates:Lon: {this.state.cityCoordinates[0]}, Lat: {this.state.cityCoordinates[1]}</p>
                <p>Wind Direction: {this.state.winddirection}˚ </p>
                <p>Selected Cities: * Write a query, setup the range, greater or less than the chosen city's coordinates *</p>
                <div id="google-map" ref={this.googleMap} style={{ width: '500px', height: '400px' }} />
            </div>
        )
    }
}

export default Radar

Is my use of this.initMap() correct? My instinct tells me this line or some of my confusion in regard with OOP is causing some troubles. So once I run, it shows the marker first with no polyline, and then the marker disappears but the poly line shows up.

Answer 1

This is happening because you instantiate your map multiple times. Every time you call this.initMap() you create a new map instance, so what you should do is call this method only once (probably in constructor), assign it to some variable and then use that variable when referring to your map in Marker() and Polyline() methods.