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

【问题标题】：react-google-maps change marker icon to waypointsreact-google-maps 将标记图标更改为航点
【发布时间】：2021-07-21 09:55:39
【问题描述】：

我正在使用 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=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>
    );

【问题讨论】：

标签： reactjs laravel google-maps react-google-maps

【解决方案1】：

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

这是一个代码sn-p：

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

这是sample code。将您的 API 密钥放入 index.js 文件中以使代码正常工作。

【讨论】：