Получение геолокации пользователя без index.html

Question

Эй, я делаю веб-приложение, которое должно отслеживать местоположение пользователя после нажатия кнопки. Я использовал для этого стек M.E.R.N, и пока я смотрел обучающие программы, им не нужен ни один файл index.html, только чистый JavaScript. Я внедрил карты Google на своем сайте, не используя HTML-файлы. Это код, который я хочу реализовать Но без необходимости создавать index.html.

Как я могу добавить этот код в мой файл main.js без HTML-файла?

ЭТО КАК У меня НАСТРОЙКА GOOGLE MAPS НА МОЙ СТРАНИЦЕ

import React, { Component } from 'react';
import { Grid, Cell } from 'react-mdl';
import Paper from '@material-ui/core/Paper';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

//THIS IS THE LANDING PAGE.
const mapStyles = {
width: '100%',
height: '100%'
};


export class LandingPage extends Component {
render() {
  return (

    <Map
    google={this.props.google}
    zoom={3}
    style={mapStyles}
    initialCenter={{
        lat: 28.871812,
        lng: -34.814106
    }}
    >
    </Map>

);
}
}




export default GoogleApiWrapper({
apiKey: 'API-KEY'
})(LandingPage);

ЭТО НАВБАР С КНОПКОЙ ВВОДА, КОТОРЫЙ ДОЛЖЕН ЗАПРОСИТЬ ГЕОЛОКАЦИЮ НА КЛИК

importS{} 
//THIS IS THE NAVIGATION BAR PAGE.

export default class NavBar extends React.Component {
    constructor(props) {
    super(props);

    this.toggleNavbar = this.toggleNavbar.bind(this);
    this.state = {
        collapsed: true
    };
}

handleClickOpen = () => {
    this.setState({ open: true });
};

handleClose = () => {
    this.setState({ open: false });
};

toggleNavbar() {
    this.setState({
    collapsed: !this.state.collapsed
    });
}


render() {
    return (
    <div>
        <Navbar style={{background: '#948E99',  flex: 1,
                        background: '-webkit-linear-gradient(to right, #2E1437, #948E99)',
                            background: 'linear-gradient(to right, #2E1437, #948E99)'}} dark>
            <NavbarToggler color="white" onClick={this.toggleNavbar} className="mr-2" />

            <Button style={{color: 'white'}} href="/" className="mrauto">DigitalDollar</Button>
            <Button style={{color: 'white'}} onClick={this.handleClickOpen}  className="mr-auto">Enter Code</Button>

            <Dialog
            open={this.state.open}
            onClose={this.handleClose}
            aria-labelledby="form-dialog-title"
            >
            <DialogTitle id="form-dialog-title">Enter Code</DialogTitle>


            <DialogContent>
                <DialogContentText>
                    Thank you for participating in  the DigitalDollar global run! By entering this code we will 
                    add your location to our map,  please enter your magnificint code here. Thank you for your 
                    participation.
                </DialogContentText>
                <TextField
                    autoFocus
                    margin="dense"
                    id="Code"
                    label="Enter Code"
                    type="Code"
                    fullWidth
                />
            </DialogContent>


            <DialogActions>
                <Button onClick={this.handleClose} color="primary">
                    Cancel
                </Button>
                <Button onClick={this.handleClose} color="primary">
                    Subscribe
                </Button>
            </DialogActions>

            </Dialog>

            <Collapse isOpen={!this.state.collapsed} navbar>
                <Nav navbar>
                    <NavItem>
                        <NavLink href="/">Home</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink href="/about">About</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink href="https://github.com/CH-SYR3" rel="noopener noreferrer" target="_blank">GitHub</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink href="https://www.paypal.com/us/home" rel="noopener noreferrer" target="_blank">Buy Me A Coffee?</NavLink>
                    </NavItem>
                </Nav>
            </Collapse>
        </Navbar>
    <div>
        <Navbar color="light" light expand="md">
            <Nav className="NavTabs" navbar>
                <NavItem>
                    <NavLink href="/">Map</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="/time">Time</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="/hello">Hello</NavLink>
                </NavItem>
            </Nav>
        </Navbar>
    </div>
    </div>
);
}

Answer 1

Это не файл, а стандарт html5, который работает в браузерах. В предоставленной вами ссылке язык навигации находится в теге script. Если вы поместите метод navigator.geolocation в функцию getUserLoc(), которая выполняет немногим больше, чем setState с координатами при нажатии, вы сможете обновить положение карты, установив состояние. Вы установили бы начальное состояние в конструкторе LandingPage, а затем передали функцию `getUserLoc () вашему компоненту NavBar, где ее можно запустить с помощью this.props.getUserLoc ().

 const mapStyles = {
  width: '100%',
  height: '100%'
};
export class LandingPage extends Component {
 constructor(props) {
  super(props)
  this.state={
    lat: 28.871812,
    lng: -34.814106
 }
 this.getUserLoc = this.getUserLoc.bind(this)
 }
getUserLoc() {
 if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
      };
        this.setState({
         userLat: pos.lat,
         userLng: pos.lng
        })
       });
     } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
   }
   render() {
    return(
      <div>
        <Map
        google={this.props.google}
        zoom={3}
        style={mapStyles}
        initialCenter={{
            lat: this.state.userLat,
            lng: this.state.userLng
        }}
        >
        </Map>
        <NavBar getUserLoc={this.getUserLoc}/>
      </div>
      )
   }
 }