Как реализовать геолокацию в приложении реагирования с помощью Google Maps JS API вместо жестко заданного местоположения? - PullRequest
Новая
       31

Как реализовать геолокацию в приложении реагирования с помощью Google Maps JS API вместо жестко заданного местоположения?

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

У меня есть приложение React, которое использует Google Maps API.Я также использую Foursquare API для получения данных о местах.В настоящее время я изучаю места рядом с Нэшвиллом, штат Теннесси, ключевые слова "йога" и "кофе".Я хочу использовать текущее местоположение пользователя и Нэшвилл как запасной вариант на случай, если они не позволят.

Я получил это от MDN: 

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);

и ищу помощь в реализацииэто в моем коде.Как начать с замены near: "Nashville, TN", ниже на код геолокации?Это мои app.js: 

import React, { Component } from 'react';
import './App.css';
import SquareAPI from './API/';
import Map from './component/Map';
import SideBar from  './component/Sidebar';

class App extends Component {
  constructor(){
    super();
    this.state = {
       venues: [],
       markers: [],
       center: [],
       zoom: 14,
       updateSuperState: obj => {
        this.setState(obj);
       }
    };
  }
  closeAllMarkers = () => {
    const markers = this.state.markers.map(marker => {
      marker.isOpen = false;
      return marker;
    });
    this.setState({ markers: Object.assign(this.state.markers, markers) });
  };
  handleMarkerClick = marker => {
    this.closeAllMarkers();
    marker.isOpen = true;
    this.setState({ markers: Object.assign(this.state.markers, marker) });
    const venue =this.state.venues.find(venue => venue.id === marker.id);

    SquareAPI.getVenueDetails(marker.id).then(res => {
        const newVenue = Object.assign(venue, res.response.venue);
        this.setState({ venues: Object.assign(this.state.venues, newVenue) })
        console.log(newVenue);
      });
  };


  handleListItemClick = venue =>{
    const marker = this.state.markers.find(marker => marker.id === venue.id)
    this.handleMarkerClick(marker)
  }

  componentDidMount(){
    SquareAPI.search({
      near:"Nashville, TN",
      query: "yoga",
      limit: 10
    }).then(results => {
        const { venues } = results.response;
        const { center } = results.response.geocode.feature.geometry;
        const markers = venues.map(venue => {
          return {
            lat: venue.location.lat,
            lng: venue.location.lng,
            isOpen: false,
            isVisible: true,
            id: venue.id
          };
        })
        this.setState({ venues, center, markers });
    }).catch(error =>{
      console.log("Error: " + error)
    })
  }
  render() {
    return (
      <div className="App">
      <SideBar {...this.state} handleListItemClick={this.handleListItemClick}/>
        <Map {...this.state}
        handleMarkerClick={this.handleMarkerClick}/>
      </div>
    );
  }
}

export default App;

и мои Map.js - мне также может понадобиться сделать это в строке 10, defaultCenter=...

/* global google */
import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps';

const MyMapComponent = withScriptjs(
    withGoogleMap(props => (
      <GoogleMap
        defaultZoom={8}
        zoom={props.zoom}
        defaultCenter={{ lat: -36.186, lng: -87.066 }}
        // defaultCenter={

        // }
        center={{
            lat: parseFloat(props.center.lat),
            lng: parseFloat(props.center.lng)
        }}
      >
        {props.markers &&
            props.markers.filter(marker => marker.isVisible).map((marker, idx, arr) => {
                const venueInfo = props.venues.find(venue => venue.id === marker.id);
            return (
                <Marker
                    key={idx}
                    position={{ lat: marker.lat, lng: marker.lng }}
                    onClick={() => props.handleMarkerClick(marker)}
                    animation={arr.length === 1
                        ? google.maps.Animation.BOUNCE
                        : google.maps.Animation.DROP}
            >
                {marker.isOpen &&
                    venueInfo.bestPhoto && (
                    <InfoWindow>
                        <React.Fragment>
                            <img src={`${venueInfo.bestPhoto.prefix}300x300${venueInfo.bestPhoto.suffix}`} alt={venueInfo.name} />
                        <p>{venueInfo.name}</p>
                        </React.Fragment>
                    </InfoWindow>
                )}
            </Marker>
            );
        })}
      </GoogleMap>
    ))
);



export default class Map extends Component {
    render() {

        return (
            <MyMapComponent
            {...this.props}
              isMarkerShown
              googleMapURL="https://maps.googleapis.com/maps/api/js?key=API_REMOVED"
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `100%`, width: `65%` }} />}
              mapElement={<div style={{ height: `100%`}} />}
            />
        );
    }
}

спасибо!

1 Ответ

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

Используйте браузеры геолокации.В документах есть пример.С точки зрения React, вы должны установить местоположение для состояния (добавить поле), передать их компоненту карты с помощью проп.

Примерно так: 

class Anything extends Component{
  state = {
   location : ''
  } //no need for constructor no more, these are called class fields. 
  getPosition= ()=> {
    console.log(navigator.gelocation)
  //look at example in the docs and then
    this.setState(response from navigator)
  }
  render(){
   return (
     <Map {...this.state}> // as you are spreading you are good here, access to 
                           // geolocation via this.props.location in map 
                           // component
   )
  }
}

https://developers.google.com/maps/documentation/javascript/geolocation

...