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