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

问题描述

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

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

这就是我在登陆页面中设置谷歌地图的方式

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);

这是带有 ENTER CODE 按钮的导航栏，应该请求地理定位点击

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>
);
}

标签： node.jsreactjshtmlgoogle-mapsgoogle-geolocation

它不是一个文件，只是一个适用于浏览器的 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>
      )
   }
 }

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

问题描述

解决方案

推荐阅读