使用 create-react-app (npm start) 运行项目时如何在 Chrome 上启用地理定位？

Question

I started a project with create-react-app and I live preview it in localhost by running 'npm start'. Since it is not http served, Chrome won't allow the geolocation to work.

How do people usually go about solving this problem and testing geolocation related features?

Answer 1

Background -

My second (2) answer will absolutely let you access your app over https.

I am not exactly sure what you are trying to accomplish or what is blocking you, but I think I can give you what you need in one of two answers.

Solutions -

Answer 1. If you simply want to have the browser show your location it will work on a fresh install of create-react-app .

npm i -g create-react-app
create-react-app geo
cd geo
npm i 
npm i --save react-geolocation 
npm start

Create a file names Geolocation.js

import React from "react";
import { geolocated } from "react-geolocated";

class Demo extends React.Component {
    render() {
        return !this.props.isGeolocationAvailable ? (
            <div>Your browser does not support Geolocation</div>
        ) : !this.props.isGeolocationEnabled ? (
            <div>Geolocation is not enabled</div>
        ) : this.props.coords ? (
            <table>
                <tbody>
                    <tr>
                        <td>latitude</td>
                        <td>{this.props.coords.latitude}</td>
                    </tr>
                    <tr>
                        <td>longitude</td>
                        <td>{this.props.coords.longitude}</td>
                    </tr>
                    <tr>
                        <td>altitude</td>
                        <td>{this.props.coords.altitude}</td>
                    </tr>
                    <tr>
                        <td>heading</td>
                        <td>{this.props.coords.heading}</td>
                    </tr>
                    <tr>
                        <td>speed</td>
                        <td>{this.props.coords.speed}</td>
                    </tr>
                </tbody>
            </table>
        ) : (
            <div>Getting the location data&hellip; </div>
        );
    }
}

export default geolocated({
    positionOptions: {
        enableHighAccuracy: false,
    },
    userDecisionTimeout: 5000,
})(Demo);

In App.js add the new component

import Geolocated from './Geolocated';

function App() {
  return (
    <div className="App">   
      <Geolocated />
    </div>
  );
}
export default App;

Answer 2. You can create an https URL for your local application in development using npm libraries like ngrok .

Make sure your react app is running on port 3000 if you follow this example. The port passed to ngrok is the port that ngrok will create the secure tunnel to.

npm i -g ngrok
ngrok 3000

ngrok by @inconshreveable
(Ctrl+C to quit) Session Status online
Session Expires 7 hours, 59 minutes
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://33333.ngrok.io -> http://localhost:3000 Forwarding https://33333.ngrok.io -> http://localhost:3000

 Connections ttl opn rt1 rt5 p50

p90
6 1 0.09 0.02 2.90 5.00
HTTP Requests

---

 GET /favicon.ico 200 OK

GET /sockjs-node 101 Switching Protocols
GET /static/media/logo.5d5d9eef.svg 200 OK
GET /static/js/main.chunk.js 200 OK
GET /static/js/0.chunk.js 200 OK
GET /static/js/bundle.js 200 OK
GET / 200 OK

In the output you should see an https URL that is forwarding to your localhost port 3000 application as long as you keep it running.

Here is a screenshot of the geolocation working...

Answer 2

正确的做法是根据 create-react-app 文档使用https=true npm start应用程序。