google-maps - 如何使用react-google-maps库创建折线

Question

我正在尝试使用react-google-maps库在4个GPS坐标之间绘制折线。 map 上没有渲染任何内容

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

是的。示例:

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.75,
                    strokeWeight: 2,
                    icons: [
                        {
                            icon: lineSymbol,
                            offset: "0",
                            repeat: "20px"
                        }
                    ]
                }}
            />
        </GoogleMap>
    );
}