在没有 index.html 的情况下检索用户的地理位置

Question

嘿，我正在制作一个必须在单击按钮后跟踪用户位置的 Web 应用程序。 为此，我一直在使用 MERN 堆栈，到目前为止，在我观看的教程中，他们不需要任何 index.html 文件，只需要纯 JavaScript。 我在我的网站上实现了谷歌地图，而没有使用任何 HTML 文件。 这是我想要实现的代码，但不必创建 index.html。

如何在没有 HTML 文件的情况下将此代码添加到我的 main.js 文件中？

这就是我在着陆页中设置 GOOGLE 地图的方式

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 标准。 在您提供的链接中，导航语言位于脚本标记中。 如果您将 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>
      )
   }
 }