react-google-mapsライブラリを使用してポリラインを作成するには

Question

react-google-mapsライブラリを使用して4つのGPS座標の間にポリラインをプロットしようとしています。マップにレンダリングされているものはありません

import React from 'react'; 
import { withGoogleMap, GoogleMap, Marker, InfoWindow,Polyline } from 'react-google-maps'; 


class googleMapComponent extends React.Component { 

//高次のコンポーネント：withGoogleMapが関数呼び出しとして使用されています。この機能は、後でレンダリングに実装される別のコンポーネントの定義を返します。

// maintain a refernce to a map inside the component, so that 
    constructor(){ 
     super() 
     this.state ={ 
      map:null 
     } 
    } 

    mapMoved(){ 
     console.log('mapMoved: ' + JSON.stringify(this.state.map.getCenter())) 
    } 

    mapLoaded(map){ 
     //console.log('mapLoaded: ' + JSON.stringify(map.getCenter())) 
     if(this.state.map !==null) 
      return 

     this.setState({ 
      map:map 
     }) 
    } 

    zoomchanged(){ 
     console.log('mapZoomed: ' + JSON.stringify(this.state.map.getZoom())) 
    } 
    handleMarkerClick(targetMarker) { 
     this.setState({ 
      markers: this.state.markers.map(marker => { 
       if (marker === targetMarker) { 
        return { 
         ...marker, 
         showInfo: true, 
        }; 
       } 
       return marker; 
      }), 
     }); 
    } 

    handleMarkerClose(targetMarker) { 
     this.setState({ 
      markers: this.state.markers.map(marker => { 
       if (marker === targetMarker) { 
        return { 
         ...marker, 
         showInfo: false, 
        }; 
       } 
       return marker; 
      }), 
     }); 
    } 

    render() { 

     const markers= [ 
      { 
       position: new google.maps.LatLng(36.05298766, -112.0837566), 
       showInfo: false, 
       infoContent: false, 
      }, 
      { 
       position: new google.maps.LatLng(36.21698848, -112.0567275), 
       showInfo: false, 
       infoContent: false, 
      }, 
     ] 
     const lineCoordinates= [ 
     {coordinate: new google.maps.LatLng(36.05298766, -112.0837566)}, 
     {coordinate: new google.maps.LatLng(36.0529832169413, -112.083731889724)}, 
     {coordinate: new google.maps.LatLng(36.0529811214655, -112.083720741793)}, 
     {coordinate: new google.maps.LatLng(36.0529811214655, -112.083720741793)}, 
    ] 

     return (
      <GoogleMap 
       ref={this.mapLoaded.bind(this)} 
       onDragEnd={this.mapMoved.bind(this)} 
       onZoomChanged={this.zoomchanged.bind(this)} 
       defaultZoom={this.props.zoom} 
       defaultCenter={this.props.center} 
      > 
       {markers.map((marker, index) => (
        <Marker 
         position={marker.position} 
         title="click on it Sir..!!" 
         defaultPosition={this.props.center} 
         style={{height: '2xpx', width: '2px'}} 
        /> 
       ))} 

       {lineCoordinates.map((polyline,index)=>(
       <Polyline 
        defaultPosition={this.props.center} 
        path= {polyline.coordinate} 
        geodesic= {true} 
        strokeColor= {#FF0000} 
        strokeOpacity= {1.0} 
        strokeWeight= {2} 
       /> 

      </GoogleMap> 

     ) 
    } 
} 
export default withGoogleMap(googleMapComponent); 

これに関する任意の提案が役に立ちます。ライブラリがこの機能をサポートしていない場合私はライブラリもswtichすることができます。

Answer 1

マッピング機能を実行するとき、座標セットごとに新しいポリラインを作成していますか？ the Google Maps docsを見ると、ポリラインはオブジェクトの配列をパス引数として取ります。 google-maps-reactはそのAPIを包むラッパーであるため、オブジェクトの配列をパスとして渡すだけでポリラインを作成することができます。現在、小さな座標フラグメントに基づいて多数のポリラインオブジェクトを生成しようとしています。

Answer 2

うん...！このように：

render() { 
    const pathCoordinates=[ 
          {lat:36.05298765935, lng:-112.083756616339}, 
          {lat:36.2169884797185,lng: -112.056727493181}, 
         ] 
     return ( 
       <GoogleMap 
         defaultZoom={this.props.zoom} 
         defaultCenter={this.props.center} 
       > 
       {/*for creating path with the updated coordinates*/} 
       <Polyline 
         path={pathCoordinates} 
         geodesic={true} 
         options={{ 
           strokeColor: '#ff2527', 
           strokeOpacity: 0.0, 
           strokeWeight: 2, 
           icons: [{ 
              icon: lineSymbol, 
              offset: '0', 
              repeat: '20px' 
             }], 
           }} 
       /> 
       </GoogleMap> 
      ) 
}