如何使用 react-google-maps 库创建折线
Posted
技术标签:
【中文标题】如何使用 react-google-maps 库创建折线【英文标题】：How to create Polyline using react-google-maps library 【发布时间】：2018-01-07 17:15:46 【问题描述】：我正在尝试使用 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作为函数调用使用。此函数返回另一个组件定义，该定义稍后会安装在渲染中
// 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);
任何关于它的建议都会有所帮助。如果库不支持此功能。我也可以切换库。
【问题讨论】：
【参考方案1】：当您运行映射函数时，您是否为每组坐标创建了一条新的折线？查看the Google Maps docs，折线将对象数组作为路径参数。 google-maps-react 只是该 API 的包装器，因此您应该能够通过传入对象数组作为路径来创建折线。目前，您正在尝试根据微小的坐标片段生成一堆折线对象。
【讨论】：
【参考方案2】：是的。示例：
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>
);
【讨论】：
是的，它正在工作。可以看例子here 花了一段时间试图弄清楚为什么这对我不起作用，结果发现path 需要在 options 中设置。也许这在某些时候发生了变化。
不是@IanW。也许您可以在options 中设置path，但您认为这不起作用的原因是以前的strokeOpacity 设置为0.0。将其设置为更明显的作品。
@JayantBhawal 这不是我的问题；我将 strokeOpacity 设置为 1。
啊哈。另一件事可能是交换了 Lat 和 Lng 值，因此它本来可以工作，但您不会看到它们。这和 strokeOpacity 是让我认为它在不同时间点不起作用的两件事。即使这样，这也可能无法解决您的问题，但也许它会帮助其他人环顾四周。【参考方案3】：
一个更简单的示例，仅显示一条正在绘制的多段线：
<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>
对于不清楚正确导入和设置的人来说，整个 sn-p （使用重组）：
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")
);
【讨论】：
以上是关于如何使用 react-google-maps 库创建折线的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 react-google-maps 通过单击在地图上添加标记？
react-google-maps：如何使用 fitBounds、panBy、panTo、panToBounds 公共 API？
如何将自定义按钮添加到 react-google-maps？