Question

我正在使用“ react-google-maps”库。

我正在尝试在图书馆的Google地图上创建一些标记，并与我的道具配合使用。我不知道它是如何工作的，因为我无法用我的地图中的值填充数组。

这是我的代码：

接口

declare interface Tour {
    googleRoute: TourMarker[];
}
declare interface TourMarker {
    latitude: number;
    longitude: number;
}

组件中的渲染方法

public render() {
    const MyMapComponent = compose(
        withProps({
            loadingElement: (<div style={{height: "100%"}}/>),
            containerElement: (<div style={{height: "400px"}}/>),
            mapElement: (<div style={{height: "100%"}}/>)
        }),
        withGoogleMap
    )(props =>
        <GoogleMap
            onClick={this.handleMapClick}
            defaultZoom={16}
            defaultCenter={new google.maps.LatLng(0,0)}
        >
            {(this.props.tour.googleRoute && this.props.tour.googleRoute.length > 0) &&
            this.props.tour.googleRoute.map((marker, index) => {
                return (
                    <Marker
                        key={index}
                        position={new google.maps.LatLng(this.props.tour.googleRoute.latitude, this.props.tour.googleRoute.longitude)}
                    />
                );
            })
            }
        </GoogleMap>
    );

    return (
        <MyMapComponent/>
    );
}

处理地图点击方法

private async handleMapClick(event: google.maps.MouseEvent | google.maps.IconMouseEvent) {

    let updatedTour = cloneDeep(this.props.tour);
    let currentTour = updatedTour.googleRoute;
    let marker:  TourMarker = {
        latitude: event.latLng.lat(),
        longitude: event.latLng.lng()
    };

    if (this.props.tour.googleRoute) {
        let check = this.props.tour.googleRoute.find((tourMarker) =>
            (tourMarker.longitude === marker.longitude) && (tourMarker.latitude === marker.latitude));

        if (!check) {
            let selectedMarker = this.props.tour.googleRoute.find((tourMarker) => (tourMarker.latitude === marker.latitude) && (tourMarker.longitude === marker.longitude));
            if (selectedMarker) {
                currentTour.push(marker);
            }
        }
    } else {
        currentTour[0] = marker;
    }

    this
        .props
        .onAddMarker(updatedTour);
    return;

}

使用道具创建Google地图标记

0 个答案: