如何使用react-google-maps库创建折线 [英] How to create Polyline using react-google-maps library

问题描述

我正在尝试使用react-google-maps库在4个GPS坐标之间绘制折线.地图上什么都没有呈现

I am trying to plot Polyline between 4 GPS coordinates using react-google-maps library. Nothing is rendering on the map

import React from 'react';
import { withGoogleMap, GoogleMap, Marker, InfoWindow,Polyline } from 'react-google-maps';


class googleMapComponent extends React.Component {

//高阶组件​​:withGoogleMap被用作函数调用.此功能返回另一个组件定义，该组件随后安装在渲染器中

//Higher order components: withGoogleMap is employed as a function call. This fucntion returns another component defination which is later mounted in 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);

任何有关它的建议都会有所帮助.如果该库不支持此功能.我也可以去图书馆.

Any suggestion on it will be helpful. If the library does not support this functionality. I can swtich the library too.

推荐答案

运行映射功能时，是否要为每组坐标创建一条新的折线?查看 Google Maps文档，该折线取一个数组对象作为路径参数.google-maps-react只是该API的包装，因此您只需通过传递对象数组作为路径即可创建折线.当前，您正在尝试根据微小的坐标片段生成一堆折线对象.

When you run the mapping function, are you creating a new polyline for each set of coordinates? Looking at the Google Maps docs, the polyline takes an array of objects as a path argument. google-maps-react is just a wrapper around that API, so you should be able to create your polyline just by passing in the array of objects as the path. Currently, you're trying to generate a bunch of polyline objects based on tiny coordinate fragments.

这篇关于如何使用react-google-maps库创建折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！