Google maps api 3 如何在react js中使用google maps directions api添加自定义标记

技术堆栈-谷歌地图方向Api、React JS等

问题陈述-使用谷歌地图方向Api，我绘制了3个引脚，即原点、航路点和目的地。我能够绘制所有这些图形，但无法向每个图形添加自定义标记。如有任何帮助/建议，我们将不胜感激：-

代码片段：-

import React, { Component } from "react";
import {
    withGoogleMap,
    withScriptjs,
    GoogleMap,
    DirectionsRenderer
} from "react-google-maps";

class Map extends Component {
    state = {
        directions: null
    };

componentDidMount() {
        const directionsService = new google.maps.DirectionsService();
        const origin = { lat: 40.756795, lng: -73.954298, icon: 'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png' };
        const destination = { lat: 41.756795, lng: -78.954298, icon: 'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png' };

   directionsService.route({
            origin: origin,
            destination: destination,
            waypoints: [{
                location: new google.maps.LatLng(42.756795, -78.954298, 'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png'),
                stopover: false
            }],
            travelMode: google.maps.TravelMode.DRIVING
        },
            (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    this.setState({
                        directions: result
                    });
                } else {
                    console.error(`error fetching directions ${result}`);
                }
            }
   );
    }
  render() {
        const GoogleMapExample = withGoogleMap(props => (
            <GoogleMap
                defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
                defaultZoom={13}
            >
                <DirectionsRenderer
                    directions={this.state.directions}
                />
            </GoogleMap>
        ));

        return (
            <div>
                <GoogleMapExample
                    containerElement={<div style={{ height: `500px`, width: "500px" }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                />
            </div>
        );
    }
}

export default Map;

import React，{Component}来自“React”；
进口{
用谷歌地图，
用ScriptJS，
谷歌地图，
方向渲染器
}从“谷歌地图反应”；
类映射扩展组件{
状态={
方向：空
};
componentDidMount（）{
const directionsService=new google.maps.directionsService（）；
常量原点={lat:40.756795，液化天然气：-73.954298，图标：'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png' };
const destination={lat:41.756795，lng:-78.954298，图标：'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png' };
方向服务.路线({
来源:来源,，
目的地：目的地，
航路点：[{
地点：new google.maps.LatLng（42.756795，-78.954298，'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png'),
中途停留：错误
}],
travelMode:google.maps.travelMode.DRIVING
},
（结果、状态）=>{
if（status==google.maps.directionstatus.OK）{
这是我的国家({
方向：结果
});
}否则{
错误（`error fetching directions${result}`）；
}
}
);
}
render（）{
const GoogleMapExample=withGoogleMap（道具=>(
));
返回(
);
}
}
导出默认地图；

---

谢谢你，谷歌地图有一个你可以使用的组件

<GoogleMap
  defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
  defaultZoom={13}
>
  <DirectionsRenderer
    directions={this.state.directions}
  />
  <Marker location={{ lat: x, lng: y }} />
</GoogleMap>

谢谢您的回答。你能帮助我如何为我们需要显示“”的原点自定义标记示例图标吗？如果你在回答中转到

marker

上的链接，你会找到所有的道具。我相信有一个

图标

属性，您应该能够将该图像分配给.render（）{const GoogleMapExample=withGoogleMap（props=>（））；我用上面的代码进行了更新，但不起作用，请在相同的{marker_arr.map（（item，I）=>( )) }