如何使用react-google-maps库创建折线
如何使用react-google-maps库创建折线
提问于 2017-08-01 09:34:36
我正在尝试使用react-google-maps库在4个GPS坐标之间绘制折线。地图上未渲染任何内容
import React from 'react';
import { withGoogleMap, GoogleMap, Marker, InfoWindow,Polyline } from 'react-google-maps';
class googleMapComponent extends React.Component {//高阶组件: withGoogleMap作为函数调用此函数返回另一个组件定义，该组件定义稍后会安装在render中
// maintain a refernce to a map inside the component, so that
constructor(){
super()
this.state ={
map:null
}
}
mapMoved(){
console.log('mapMoved: ' + JSON.stringify(this.state.map.getCenter()))
}
mapLoaded(map){
//console.log('mapLoaded: ' + JSON.stringify(map.getCenter()))
if(this.state.map !==null)
return
this.setState({
map:map
})
}
zoomchanged(){
console.log('mapZoomed: ' + JSON.stringify(this.state.map.getZoom()))
}
handleMarkerClick(targetMarker) {
this.setState({
markers: this.state.markers.map(marker => {
if (marker === targetMarker) {
return {
...marker,
showInfo: true,
};
}
return marker;
}),
});
}
handleMarkerClose(targetMarker) {
this.setState({
markers: this.state.markers.map(marker => {
if (marker === targetMarker) {
return {
...marker,
showInfo: false,
};
}
return marker;
}),
});
}
render() {
const markers= [
{
position: new google.maps.LatLng(36.05298766, -112.0837566),
showInfo: false,
infoContent: false,
},
{
position: new google.maps.LatLng(36.21698848, -112.0567275),
showInfo: false,
infoContent: false,
},
]
const lineCoordinates= [
{coordinate: new google.maps.LatLng(36.05298766, -112.0837566)},
{coordinate: new google.maps.LatLng(36.0529832169413, -112.083731889724)},
{coordinate: new google.maps.LatLng(36.0529811214655, -112.083720741793)},
{coordinate: new google.maps.LatLng(36.0529811214655, -112.083720741793)},
]
return (
<GoogleMap
ref={this.mapLoaded.bind(this)}
onDragEnd={this.mapMoved.bind(this)}
onZoomChanged={this.zoomchanged.bind(this)}
defaultZoom={this.props.zoom}
defaultCenter={this.props.center}
>
{markers.map((marker, index) => (
<Marker
position={marker.position}
title="click on it Sir..!!"
defaultPosition={this.props.center}
style={{height: '2xpx', width: '2px'}}
/>
))}
{lineCoordinates.map((polyline,index)=>(
<Polyline
defaultPosition={this.props.center}
path= {polyline.coordinate}
geodesic= {true}
strokeColor= {#FF0000}
strokeOpacity= {1.0}
strokeWeight= {2}
/>
</GoogleMap>
)
}
}
export default withGoogleMap(googleMapComponent);任何关于它的建议都会很有帮助。如果库不支持此功能。我也可以交换图书馆。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-08-03 01:08:24
运行映射函数时，是否要为每组坐标创建一条新的多段线？看看the Google Maps docs，多段线接受一个对象数组作为路径参数。google-maps react只是该API的一个包装器，因此您应该能够通过将对象数组作为路径传递来创建您的polyline。目前，您正在尝试基于微小的坐标片段生成一组polyline对象。
Stack Overflow用户
发布于 2017-08-06 00:18:10
是。示例：
render() {
const pathCoordinates = [
{ lat: 36.05298765935, lng: -112.083756616339 },
{ lat: 36.2169884797185, lng: -112.056727493181 }
];
return (
<GoogleMap
defaultZoom={this.props.zoom}
defaultCenter={this.props.center}
>
{/*for creating path with the updated coordinates*/}
<Polyline
path={pathCoordinates}
geodesic={true}
options={{
strokeColor: "#ff2527",
strokeOpacity: 0.75,
strokeWeight: 2,
icons: [
{
icon: lineSymbol,
offset: "0",
repeat: "20px"
}
]
}}
/>
</GoogleMap>
);
}Stack Overflow用户
发布于 2018-09-26 00:44:00
一个更简单的示例，仅显示正在绘制的一条多段线：
<GoogleMap defaultZoom={7} defaultCenter={{ lat: -34.897, lng: 151.144 }}>
<Polyline path={[{ lat: -34.397, lng: 150.644 }, { lat: -35.397, lng: 151.644 }]}/>
</GoogleMap>对于任何不清楚正确的导入和设置(带重组)的人，请参阅完整的代码片段
import React from "react";
import ReactDOM from "react-dom";
import { compose, withProps } from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
Polyline
} from "react-google-maps";
const MyMapComponent = 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: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />
}),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap defaultZoom={7} defaultCenter={{ lat: -34.897, lng: 151.144 }}>
<Polyline path={[{ lat: -34.397, lng: 150.644 }, { lat: -35.397, lng: 151.644 }]}/>
</GoogleMap>
));
ReactDOM.render(<MyMapComponent />, document.getElementById("root"));与上面的示例相同，不重组的
import React from "react";
import ReactDOM from "react-dom";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Polyline
} from "react-google-maps";
const InternalMap = props => (
<GoogleMap defaultZoom={7} defaultCenter={{ lat: -34.897, lng: 151.144 }}>
<Polyline
path={[{ lat: -34.397, lng: 150.644 }, { lat: -35.397, lng: 151.644 }]}
/>
</GoogleMap>
);
const MapHoc = withScriptjs(withGoogleMap(InternalMap));
const MyMapComponent = props => (
<MapHoc
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: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
);
ReactDOM.render(
<MyMapComponent />,
document.getElementById("root")
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45427635
复制相关文章
相似问题
腾讯云开发者
