如何解决如何在react js中使用google maps方向api添加自定义标记
技术栈 - Google Map Directions 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;
谢谢
解决方法
react-google-maps
有一个您可以使用的 Marker
组件。
<GoogleMap
defaultCenter={{ lat: 40.756795,lng: -73.954298 }}
defaultZoom={13}
>
<DirectionsRenderer
directions={this.state.directions}
/>
<Marker location={{ lat: x,lng: y }} />
</GoogleMap>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。