react-google-maps 将标记图标更改为航路点

Question

我正在使用 react-google-maps ( https://tomchentw.github.io/react-google-maps/ ) 开发跟踪 web 视图的交付应用程序。 我需要自定义航点标记的图标。 我已经在谷歌中搜索并集成到我的代码中，但不幸的是没有任何效果。 数据来自 api 回复。

这是我的代码。

 const TrackingMap = compose(
        withProps({
            googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing,places",
            loadingElement: <div style={{ height: `100%` }} />,
            containerElement: <div style={{ height: '700px', width:'100%' }} />,
            mapElement: <div style={{ height: '100%' }} />,
        }),
        withScriptjs,
        withGoogleMap,
        lifecycle({
            componentDidMount() {
                let destinationLat, destinationLng, pickupLat, pickupLng;
                var waypts = [];
                var wayptsMarker = [];
                const DirectionsService = new google.maps.DirectionsService();

                for (let i = 0; i < points.length; i++) {
                    if (i < points.length-1 ) {
                       waypts.push({
                            location: new google.maps.LatLng(parseFloat(points[i].destination_latutude), parseFloat(points[i].destination_longitude)),
                            stopover: true,
                        });
                    }
                    
                    if (i == 0) {
                        pickupLat = parseFloat(points[i].pickup_latutude)
                        pickupLng = parseFloat(points[i].pickup_longitude)
                    }
                    
                    if (i == points.length-1) {
                        destinationLat = parseFloat(points[i].destination_latutude);
                        destinationLng =  parseFloat(points[i].destination_longitude);
                    }
                }

                DirectionsService.route({
                    origin: new google.maps.LatLng(parseFloat(bookingDetails.rider_latitude), parseFloat(bookingDetails.rider_longitude)),
                    destination:  new google.maps.LatLng(destinationLat, destinationLng),
                    waypoints: waypts,
                    travelMode: google.maps.TravelMode.DRIVING,
                    optimizeWaypoints: true,
                }, (result, status) => {
                    if (status === google.maps.DirectionsStatus.OK) {
                        this.setState({
                            directions: result,
                        });
                    } else {
                        alert(`error fetching directions ${result}`);
                    }
                });
            }
        })
    )(props =>
        <GoogleMap
            defaultZoom={7}
            defaultCenter={{ lat: parseFloat(bookingDetails.rider_latitude), lng: parseFloat(bookingDetails.rider_longitude) }}
        >
            
        {props.directions && 
            <DirectionsRenderer
                suppressMarkers= {true}
                directions={props.directions}
                geodesic={true}
                options={{
                    polylineOptions: {
                        strokeOpacity: 1.0,
                        strokeColor: '#F36629',
                        strokeWeight: 6,
                    },
                }}
            />
        }

        </GoogleMap>
    );

Answer 1

我看到您在 DirectionsRenderer object 中使用了suppressMarkers ，但要正确使用它，您需要将它放在options属性中。 将其设置为 true 会删除所有默认标记（起点、航路点和目的地）。 然后，您可以使用Marker object 在这些位置上放置标记。 由于 Waypoints 在数组中，您可以使用.map循环遍历此数组，并放置一个带有icon属性的标记 object。 这将更改并使用图标值设置所有 Waypoints 标记。

这是一个代码片段：

<GoogleMap
        defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
        defaultZoom={13}
      >
        {this.state.directions != null && (
          <DirectionsRenderer
            directions={this.state.directions}
            options={{ suppressMarkers: true }}
          />
        )}
        <Marker position={this.state.origin} />
        <Marker position={this.state.dest} />
        {this.state.waypts.map(waypt => (
          <Marker
            position={{ lat: waypt.location.lat, lng: waypt.location.lng }}
            icon={'http://maps.google.com/mapfiles/kml/paddle/blu-blank.png'}
            label={'W'}
          />
        ))}
      </GoogleMap>

这是示例代码。 将您的 API 密钥放入index.js文件中，以便代码运行。

Answer 2

我正在使用 react-google-maps 开发跟踪 web 交付应用程序视图（ https://tomchentw.github.io/react-google-maps/ ） 我需要自定义航点标记的图标。 我已经在谷歌搜索并集成到我的代码中，但不幸的是没有一个有效。 数据来自 api 响应。

这是我的代码。

 const TrackingMap = compose(
        withProps({
            googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyBPVR1cwcLUsVyAq4Hc4G7GspS6ucslzsE&v=3.exp&libraries=geometry,drawing,places",
            loadingElement: <div style={{ height: `100%` }} />,
            containerElement: <div style={{ height: '700px', width:'100%' }} />,
            mapElement: <div style={{ height: '100%' }} />,
        }),
        withScriptjs,
        withGoogleMap,
        lifecycle({
            componentDidMount() {
                let destinationLat, destinationLng, pickupLat, pickupLng;
                var waypts = [];
                var wayptsMarker = [];
                const DirectionsService = new google.maps.DirectionsService();

                for (let i = 0; i < points.length; i++) {
                    if (i < points.length-1 ) {
                       waypts.push({
                            location: new google.maps.LatLng(parseFloat(points[i].destination_latutude), parseFloat(points[i].destination_longitude)),
                            stopover: true,
                        });
                    }
                    
                    if (i == 0) {
                        pickupLat = parseFloat(points[i].pickup_latutude)
                        pickupLng = parseFloat(points[i].pickup_longitude)
                    }
                    
                    if (i == points.length-1) {
                        destinationLat = parseFloat(points[i].destination_latutude);
                        destinationLng =  parseFloat(points[i].destination_longitude);
                    }
                }

                DirectionsService.route({
                    origin: new google.maps.LatLng(parseFloat(bookingDetails.rider_latitude), parseFloat(bookingDetails.rider_longitude)),
                    destination:  new google.maps.LatLng(destinationLat, destinationLng),
                    waypoints: waypts,
                    travelMode: google.maps.TravelMode.DRIVING,
                    optimizeWaypoints: true,
                }, (result, status) => {
                    if (status === google.maps.DirectionsStatus.OK) {
                        this.setState({
                            directions: result,
                        });
                    } else {
                        alert(`error fetching directions ${result}`);
                    }
                });
            }
        })
    )(props =>
        <GoogleMap
            defaultZoom={7}
            defaultCenter={{ lat: parseFloat(bookingDetails.rider_latitude), lng: parseFloat(bookingDetails.rider_longitude) }}
        >
            
        {props.directions && 
            <DirectionsRenderer
                suppressMarkers= {true}
                directions={props.directions}
                geodesic={true}
                options={{
                    polylineOptions: {
                        strokeOpacity: 1.0,
                        strokeColor: '#F36629',
                        strokeWeight: 6,
                    },
                }}
            />
        }

        </GoogleMap>
    );