Google Maps Javascript API，标记和折线的问题不在React.js应用程序上一起显示 [英] Issues with Google Maps Javascript API, Marker and Polylines NOT SHOWING together on a React.js App

问题描述

我非常确定state和setState的内容是正确的，所以这是我的代码.我在这里所做的就是为地图键分配了功能this.initMap().要详细查看:

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

我对this.initMap()的使用正确吗?我的直觉告诉我这句话，或者我对OOP的某些困惑正在引起一些麻烦.因此，一旦我运行，它将首先显示没有多段线的标记，然后该标记消失，但多段线会显示.

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.

推荐答案

之所以发生这种情况，是因为您多次实例化了地图.每次调用this.initMap()时，您都会创建一个新的地图实例，因此您应该做的是只调用一次此方法(可能在构造函数中)，将其分配给某个变量，然后在引用Marker()中的地图时使用该变量.和Polyline()方法.

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.

这篇关于Google Maps Javascript API，标记和折线的问题不在React.js应用程序上一起显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！