【基于React-Native做位置信息获取，并展示出来】

在这个里面最重要的是两个部分，一个是位置定位的权限获取，一个是实时位置的监听，在安卓项目中，在

android/app/src/main/AndroidManifest.xml
1

该文件下，在< manifest > 标签内写入以下权限

    <!--用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <!--用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.INTERNET" />
1
2
3
4
5

获取当前位置信息，在React-Native项目中，我使用的WebView来做地图渲染，基于openlayer提前将vue3+vite工程构建好，将打包的项目放置在

android/app/src/main/assets/GIS
1

在React-Native页面内代码如下

import React, {useEffect, useRef, useState} from 'react';
import {View, StyleSheet, PermissionsAndroid, Alert} from 'react-native';
import Geolocation from '@react-native-community/geolocation';
import {WebView} from 'react-native-webview';
import {useFocusEffect} from '@react-navigation/native';
// 获取设备地理位置
let watchId;
const MyWebView = () => {
  const [error, setError] = useState(null);
  const webViewRef = useRef(null);

  // 请求位置权限
  const requestLocationPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: 'Location Permission',
          message: 'App needs access to your location.',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('Location permission granted');
        // 用户已授予位置权限，开始获取地理位置
        getDeviceLocation();
        // startLocationWatch(); // 调用开始位置监视函数
      } else {
        console.log('Location permission denied');
        // 处理权限被拒绝的情况
        Alert.alert(
          'Location Permission Denied',
          'Please enable location services to use this feature.',
        );
      }
    } catch (err) {
      console.warn(err);
    }
  };
  
  const getDeviceLocation = () => {
    watchId = Geolocation.watchPosition(
      position => {
        const {latitude, longitude, heading} = position.coords;

        // 向 WebView 发送位置数据，但只有在WebView加载完成后才发送
        // if (webViewLoaded) {
        const locationData = JSON.stringify({longitude, latitude, heading});
        // webViewRef.current.injectJavaScript(jsCode);
        webViewRef.current?.injectJavaScript(`
        function toChangeLocation(){
              window.currentLocation = '${locationData}';

            // 手动触发位置变化事件，通知监听器
          
            const event = new Event('currentLocationChanged');
            event.detail = window.currentLocation; // 通过事件的 detail 属性传递新的位置信息
            window.dispatchEvent(event);
        }
        setInterval(()=>{
                toChangeLocation()
        },500)
      
            `); 
      },
      error => {
        setError(error.message);
      },
      {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000,
        accuracy: {
          android: 'high',
          ios: 'best',
        },
        distanceFilter: -1,
        interval: 1000,
      },
    );

    return () => {
      Geolocation.clearWatch(watchId);
      watchId = undefined;
    };
  };
  // 在屏幕聚焦时执行
  useFocusEffect(
    React.useCallback(() => {
      watchId && Geolocation.clearWatch(watchId);
      watchId = undefined;
      requestLocationPermission();
      getDeviceLocation();

      return () => {
        clearLocationWatch();
      };
    }, []),
  );
  // 清除位置监视
  const clearLocationWatch = () => {
    watchId && Geolocation.clearWatch(watchId);
  };

  return (
    <View style={styles.container}>
      <WebView
        ref={webViewRef}
        source={{uri: 'file:///android_asset/GIS/index.html'}} // 这里的路径应该指向你的Vue.js项目的index.html文件
        // source={{uri: `http://192.168.87.184:5173`}} // 要加载的外部链接地址
        style={styles.webview}
        javaScriptEnabled={true}
        scalesPageToFit={true}
        mixedContentMode="always"
        useWebKit={true}
        startInLoadingState={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

export default MyWebView;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

模拟器内更改位置是立即执行的，但是到手机里面就只执行一次了，所以我给了interval，具体原因位置，另外本来项目与webview通信应该用postmessage通信，但是打完包后，挂在window下的function拿不到，具体原因还不清楚，所以只能在项目中强制监听了，然后在html中自己写事件去触发自己，在项目中

  window.addEventListener('currentLocationChanged', (event) => {
    let newLocation = event.detail; // 获取新的位置信息
    updateMapLocation(newLocation); // 调用更新地图位置的函数
    if(firstLocate){
      firstLocate=false
      locateToCurrent()
    } 
  });
1
2
3
4
5
6
7
8