синяя точка для текущего местоположения в реакции-Google-карты - PullRequest
Новая
       29

синяя точка для текущего местоположения в реакции-Google-карты

0 голосов
/ 24 октября 2018

Я хочу добавить синюю точку для моего текущего местоположения в моем проекте.Код для моего файла карты следующий:

состояние 

this.state={
  currentPosition:{lat: 26.84   ,lng: 75.80},
  destinationPosition:{lat: 26.84   ,lng: 75.80}
};

handleClick для текущего местоположения 

handleClick(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition((position)=>{
            this.setState(()=>({
                currentPosition:{
                    lat:position.coords.latitude,
                    lng:position.coords.longitude}}))
            console.log(position.coords.latitude);
        }); 
    }
    else{
        alert("Geoloaction is not supported by your browser");
    }
}

и функция рендеринга работает следующим образом 

render(){
  const MyMapComponent = compose(
    withProps({
      googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC5VMMlyr_A6K5ycpOrq3OsVM8YYbn0q3A&v=3.exp&libraries=geometry,drawing,places",
      loadingElement: <div style={{ height: `100%` }} />,
      containerElement: <div style={{ height: `300px` }} />,
      mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap
    )((props) =>
      <GoogleMap defaultZoom={15} defaultCenter= 
        {this.state.destinationPosition} >
        <Marker position={this.state.destinationPosition} draggable 
           changeLat
           onDragEnd={this.onMarkerPositionChanged.bind(this)}
        />

        <Button bsStyle="success" onClick= 
            {this.handleClick.bind(this)}>Current Position</Button>
        </GoogleMap>
    );

    return(
      <Container 
         text={<Text lat={this.state.destinationPosition.lat} 
         lng={this.state.destinationPosition.lng}/>} 
         map={<MyMapComponent />} 
      />

    );
}

Также, пожалуйста, скажите мне, как я могу добавить на карту и маркер, и синюю точку.

1 Ответ

0 голосов
/ 26 октября 2018 
render() {
    const MyMapComponent = compose(
        withProps({
            googleMapURL:
                'https://maps.googleapis.com/maps/api/js?key=AIzaSyC5VMMlyr_A6K5ycpOrq3OsVM8YYbn0q3A&v=3.exp&libraries=geometry,drawing,places',
            loadingElement: <div style={{ height: `100%` }} />,
            containerElement: <div style={{ height: `300px` }} />,
            mapElement: <div style={{ height: `100%` }} />
        }),
        withScriptjs,
        withGoogleMap
    )(props => (
        <GoogleMap defaultZoom={15} defaultCenter={this.state.destinationPosition}>
            <Marker
                position={this.state.destinationPosition}
                draggable
                changeLat
                onDragEnd={this.onMarkerPositionChanged.bind(this)}
            />

            //this is your current location blue dot
            //could replace it with the icon you like
            <Marker
                icon="https://www.robotwoods.com/dev/misc/bluecircle.png"
                position={this.state.currentPosition}
            />

            <Button bsStyle="success" onClick={this.handleClick.bind(this)}>
                Current Position
            </Button>
        </GoogleMap>
    ));

    return (
        <Container
            text={
                <Text
                    lat={this.state.destinationPosition.lat}
                    lng={this.state.destinationPosition.lng}
                />
            }
            map={<MyMapComponent />}
        />
    );
}
...