如何在 REACTJS 上使用 Google 地图 API 创建新标记或标记列表

Question

我想在我的地图上创建一个标记列表，但要创建一个，我们需要使用 .Marker 对象，它需要指定地图。我在 initMap() 上获得了所有配置，并且在函数内部很容易创建标记，但是当我尝试在按钮上使用 "click" 之类的事件来创建标记时，我不太确定如何去做吧。一件事是我决定在 ReactJS 组件上使用纯 JS 实现地图，我没有使用 react-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)

Answer 1

您似乎没有在 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
}

如何在 REACTJS 上使用 Google 地图 API 创建新标记或标记列表

How to create a new marker or list of markers using Google Maps API on REACTJS

google-maps

event-handling

google-maps-markers

reactjs