Google지도는 구글지도 작업을위한

Question

내 반응/돌아 오는 구성 요소/돌아 오는 구성 요소 반응 :

import React, { Component, PropTypes } from 'react' 
import { connect } from 'react-redux' 

import { changeMapCenter } from '../actions' 

class Map extends Component { 

    componentDidMount() { 
    let script = document.createElement('script') 

    script.setAttribute('type', 'text/javascript') 
    script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCXg-YGJF&callback=initMap') 
    document.getElementsByTagName('head')[0].appendChild(script) 

    window.initMap =() => { 
     this.map = new google.maps.Map(document.getElementById('map'), { 
     center: this.props.defaultCenter, 
     zoom: this.props.defaultZoom 
     }); 

     this.map.addListener('center_changed', (event) => { 
     let center = { 
      lat: this.map.getCenter().lat(), 
      lng: this.map.getCenter().lng() 
     } 
     this.props.onMapCenterChanging(center) 
     }); 
    } 
    } 

    render() { 
    return (
     <div id='map'></div> 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    mapPoints: state.mapPoints 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onMapCenterChanging: (center) => { 
     dispatch(changeMapCenter(center)) 
    }  
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Map) 

지금 단지지도를 초기화하고지도 센터의 변화를 수신이 구성 요소를 볼 수 있듯이. 이제 마커 (mapPoints)를 렌더링해야합니다.

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Click to zoom' 
    }); 

을하지만 '반작용 스타일'을 얼마나을 수행 할 수 있습니다 구글의 API 문서에서 나는 (예를 들어)을 할 수 있습니까? 드로잉 마커는 '렌더링'HTML이 아니므로 JS Google Maps API 함수를 호출하는 것입니다. 이 논리를 'initMap'함수에 넣을 수는 있지만 'mapPoints'는 바뀔 수 있습니다. '렌더링'기능에서 JS 논리 (삭제 된 점 제거/새로운 점 그리기)를 넣어야합니까? 감사!

Answer 1

일반적으로 일부 필수 API (예 : jQuery 위젯 또는 유사)를 처리하는 React 구성 요소는 아무 것도 렌더링하지 않거나 컨테이너 div와 같이 최소한의 콘텐츠 만 렌더링하므로 래핑 된 내용을 업데이트합니다 React lifecycle 메소드 중 위젯. 실제로 이미 Google Maps API를 마무리 짓는 몇 가지 구성 요소가 있습니다. 특히 https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/에서 그렇게하는 방법을 안내합니다.