Как создать новый маркер или список маркеров, используя Google Maps API на REACTJS - PullRequest
Новая
       7

Как создать новый маркер или список маркеров, используя Google Maps API на REACTJS

0 голосов
/ 20 февраля 2019

Я пытаюсь создать список маркеров на моей карте, но чтобы создать его, нам нужно использовать объект .Marker, для этого требуется указать карту.Я получил всю свою конфигурацию в initMap (), и внутри функции легко создать маркер, но когда я пытаюсь использовать событие типа «щелкнуть» по кнопке, чтобы создать маркер, я не совсем уверен, как это сделатьЭто.Одна вещь заключается в том, что я решил реализовать карту, используя чистый JS на компоненте ReactJS, я не использую библиотеку реагировать-google-maps.

Карта работает нормально, но я хотел бы сейчас узнать, как создавать маркеры, потому что мой план состоит в том, чтобы вывести и выстроить массив из БД, чтобы таким образом он отображал определенные точки в зависимости от события. 

class MapComponent extends React.Component {

    componentDidMount(){
        this.renderMap(); 
    }
 renderMap=()=>{
     loadScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyBTOonRy8VwjMLryGyfmUOAexCgrQI9m0A&callback=initMap')
     window.initMap = this.initMap; 
    }
 initMap=()=> {
        let uluru = {lat: 9.024645, lng:-79.531094 }; // eslint-disable-next-line
        var mapOptions = {
            zoom: 17,
            center: uluru,
            mapTypeId: 'satellite'
          };
        let map = new window.google.maps.Map(document.getElementById('map'), mapOptions); // eslint-disable-next-line

    }

createMarker=()=>{ 
    console.log('works')
    let marker = new window.google.maps.Marker({position: {lat: 9.024645, lng:-79.531094}, map: this.initMap.map} )
    return marker
}

    render(){
    const { points, logged } = this.props
    if(!logged) return <Redirect to='signIn' />

        return(
            <main>
                <div id="map">
                </div>
                <button onClick={this.createMarker}> Click </button>
            </main>

        );}

}

function loadScript(url){
    var index = window.document.getElementsByTagName('script')[0];
    var script = window.document.createElement('script'); 
    script.src = url; 
    script.async = true; 
    script.defer = true; 
    index.parentNode.insertBefore(script, index); 


}

const mapStateToProps =(state)=>{
    return {
    points: state.firestore.ordered.points,
    logged: state.firebase.auth.uid
    }
}
export default compose(
    connect(mapStateToProps), 
    firestoreConnect([
        { collection:'points' }, 
    ])
)(MapComponent)

1 Ответ

0 голосов
/ 20 февраля 2019

Кажется, вы не возвращаетесь в своей функции initMap: 

 initMap=()=> {
    let uluru = {lat: 9.024645, lng:-79.531094 }; // eslint-disable-next-line
    var mapOptions = {
        zoom: 17,
        center: uluru,
        mapTypeId: 'satellite'
      };
    let this.myMap = window.google.maps.Map(document.getElementById('map'), mapOptions); // eslint-disable-next-line

}

и называете ее так: 

createMarker=()=>{ 
    console.log('works')
    let marker = new window.google.maps.Marker({position: {lat: 9.024645, lng:-79.531094}, map: this.myMap} )
    return marker
}
...