如何使用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); 

對此的任何建議都將有所幫助。如果庫不支持此功能。我也可以打開圖書館。

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> 
      ) 
}