在react-google-maps中绘制折线可以通过以下步骤实现:
npm install react-google-maps
import { withGoogleMap, GoogleMap, Polyline } from 'react-google-maps';
const MapWithPolyline = withGoogleMap(props => (
<GoogleMap
defaultCenter={{ lat: 37.7749, lng: -122.4194 }} // 设置地图的中心点
defaultZoom={13} // 设置地图的缩放级别
>
{/* 在这里添加折线组件 */}
<Polyline
path={[
{ lat: 37.7749, lng: -122.4194 }, // 折线的起点
{ lat: 37.7749, lng: -122.4314 }, // 折线的中间点
{ lat: 37.7849, lng: -122.4314 }, // 折线的终点
]}
options={{
strokeColor: '#FF0000', // 设置折线的颜色
strokeOpacity: 1.0, // 设置折线的透明度
strokeWeight: 2, // 设置折线的宽度
}}
/>
</GoogleMap>
));
class MyMapComponent extends React.Component {
render() {
return (
<MapWithPolyline
containerElement={<div style={{ height: '400px' }} />}
mapElement={<div style={{ height: '100%' }} />}
/>
);
}
}
这样,你就可以在react-google-maps中成功绘制折线了。你可以根据需要调整折线的起点、终点、颜色、透明度和宽度等属性。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云