谷歌地图或react native中的一些自定义地图



我正在尝试构建一个应用程序,将地址放在地图的某些位置,这样用户就可以搜索它,它可以精确定位地图中的确切位置。你需要人工智能或一些技术/库来使用react native吗。

不,你不需要人工智能技术就可以工作。您可以使用此代码通过所需的npm安装获得当前位置。但你需要激活谷歌开发者帐户,启用开发者帐户,并为地图启用所需的API,然后复制API密钥并将其粘贴到你的app.json,如下所示:

"android": {
"package": <Project package name>,
"config": {
"googleMaps": {
"apiKey": "<YOUR API KEY>"
}
}
}

然后试试这个代码,我在这里用过expo!

import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, Dimensions } from 'react-native';
import * as Location from 'expo-location';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
const CurrentLocation = (props) =>{
const [location, setLocation] = useState(null);
const [latLong, setLatLong] = useState(null)
const [errorMsg, setErrorMsg] = useState(null);
useEffect(() => {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
}

let location = await Location.getCurrentPositionAsync({});
setLocation(location);
setLatLong({
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.015,
longitudeDelta: 0.0121
})
})();
});

let text = 'Waiting..';
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = JSON.stringify(location);
}
let userLocationMarker = null;
if(latLong){
userLocationMarker = <MapView.Marker 
coordinate={latLong}/>;
}

return(
<View style={styles.container}>
<Text>{text}</Text>
<MapView style={styles.mapStyle} provider={PROVIDER_GOOGLE} 
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
region={latLong}>
{userLocationMarker}
</MapView>
</View>
);
}
export default CurrentLocation;
const styles = StyleSheet.create({
container: {
flex: 1,
},
mapStyle: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});

最新更新