当前位置适用于 long 和 lat null 值,但不适用于 IOS?
current location works perfect with long and lat null values, however not with IOS?
我想在 IOS 的地图上获取我的当前位置,但是 long: null 和 lat: null,两者似乎都在 android 的地图上获取当前位置,但没有在 IOS 工作,我该怎么做才能获得 IOS 上的当前位置?下面是代码,例如我的初始区域是 lat:null,long: null,但是在 android 上我得到了当前位置,但是在 ios 上我没有
class MapScreen extends Component {
//Set the HeaderTitle screen
static navigationOptions = props => {
const placeName = props.navigation.getParam("placeName");
return { headerTitle: placeName.toUpperCase() };
};
constructor(props) {
super(props);
//Initial State
this.state = {
lat: null,
long: null,
places: [],
isLoading: false,
placeType: "restaurant"
};
}
componentDidMount() {
console.log(this.props);
const { navigation } = this.props;
const placeType = navigation.getParam("placeType");
this.setState({ placeType: placeType });
this.getCurrentLocation();
}
/**
* Get current user's position
*/
getCurrentLocation() {
navigator.geolocation.getCurrentPosition(position => {
const lat = position.coords.latitude;
const long = position.coords.longitude;
this.setState({ lat: lat, long: long });
this.getPlaces();
});
}
/**
* Get the Place URL
*/
getPlacesUrl(lat, long, radius, type, apiKey) {
const baseUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?`;
const location = `location=${lat},${long}&radius=${radius}`;
const typeData = `&types=${type}`;
const api = `&key=${apiKey}`;
return `${baseUrl}${location}${typeData}${api}`;
}
getPlaces() {
const { lat, long, placeType } = this.state;
const markers = [];
const url = this.getPlacesUrl(lat, long, 1500, placeType, GOOGLE_API_KEY);
fetch(url)
.then(res => res.json())
.then(res => {
res.results.map((element, index) => {
const marketObj = {};
marketObj.id = element.id;
marketObj.name = element.name;
marketObj.photos = element.photos;
marketObj.rating = element.rating;
marketObj.vicinity = element.vicinity;
marketObj.marker = {
latitude: element.geometry.location.lat,
longitude: element.geometry.location.lng
};
markers.push(marketObj);
});
//update our places array
this.setState({ places: markers });
});
}
render() {
const { lat, long, places } = this.state;
return (
<View style={styles.container}>
<View style={styles.mapView}>
<MapView
style={{
flex: 1
}}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: lat,
longitude: long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
>
{places.map((marker, i) => (
<MapView.Marker
key={i}
coordinate={{
latitude: marker.marker.latitude,
longitude: marker.marker.longitude
}}
title={marker.name}
/>
))}
</MapView>
你试过了吗react-native-geolocation-service
React native geolocation service for iOS and android.
为什么?
创建此库是为了修复 android 上 react-native 当前实现的地理定位 API 的定位超时问题。这个库试图通过使用 Google Play 服务的新 FusedLocationProviderClient API 来解决这个问题,Google 强烈推荐 android 的默认框架位置 API。它会根据您的请求配置自动决定使用哪个提供商,如果它不满足您当前的请求配置,还会提示您更改定位模式。
注意:位置请求仍然会超时,因为许多 android 设备在硬件级别或系统软件级别存在 GPS 问题。查看常见问题解答了解更多详情。
我想在 IOS 的地图上获取我的当前位置,但是 long: null 和 lat: null,两者似乎都在 android 的地图上获取当前位置,但没有在 IOS 工作,我该怎么做才能获得 IOS 上的当前位置?下面是代码,例如我的初始区域是 lat:null,long: null,但是在 android 上我得到了当前位置,但是在 ios 上我没有
class MapScreen extends Component {
//Set the HeaderTitle screen
static navigationOptions = props => {
const placeName = props.navigation.getParam("placeName");
return { headerTitle: placeName.toUpperCase() };
};
constructor(props) {
super(props);
//Initial State
this.state = {
lat: null,
long: null,
places: [],
isLoading: false,
placeType: "restaurant"
};
}
componentDidMount() {
console.log(this.props);
const { navigation } = this.props;
const placeType = navigation.getParam("placeType");
this.setState({ placeType: placeType });
this.getCurrentLocation();
}
/**
* Get current user's position
*/
getCurrentLocation() {
navigator.geolocation.getCurrentPosition(position => {
const lat = position.coords.latitude;
const long = position.coords.longitude;
this.setState({ lat: lat, long: long });
this.getPlaces();
});
}
/**
* Get the Place URL
*/
getPlacesUrl(lat, long, radius, type, apiKey) {
const baseUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?`;
const location = `location=${lat},${long}&radius=${radius}`;
const typeData = `&types=${type}`;
const api = `&key=${apiKey}`;
return `${baseUrl}${location}${typeData}${api}`;
}
getPlaces() {
const { lat, long, placeType } = this.state;
const markers = [];
const url = this.getPlacesUrl(lat, long, 1500, placeType, GOOGLE_API_KEY);
fetch(url)
.then(res => res.json())
.then(res => {
res.results.map((element, index) => {
const marketObj = {};
marketObj.id = element.id;
marketObj.name = element.name;
marketObj.photos = element.photos;
marketObj.rating = element.rating;
marketObj.vicinity = element.vicinity;
marketObj.marker = {
latitude: element.geometry.location.lat,
longitude: element.geometry.location.lng
};
markers.push(marketObj);
});
//update our places array
this.setState({ places: markers });
});
}
render() {
const { lat, long, places } = this.state;
return (
<View style={styles.container}>
<View style={styles.mapView}>
<MapView
style={{
flex: 1
}}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: lat,
longitude: long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
>
{places.map((marker, i) => (
<MapView.Marker
key={i}
coordinate={{
latitude: marker.marker.latitude,
longitude: marker.marker.longitude
}}
title={marker.name}
/>
))}
</MapView>
你试过了吗react-native-geolocation-service
React native geolocation service for iOS and android.
为什么?
创建此库是为了修复 android 上 react-native 当前实现的地理定位 API 的定位超时问题。这个库试图通过使用 Google Play 服务的新 FusedLocationProviderClient API 来解决这个问题,Google 强烈推荐 android 的默认框架位置 API。它会根据您的请求配置自动决定使用哪个提供商,如果它不满足您当前的请求配置,还会提示您更改定位模式。
注意:位置请求仍然会超时,因为许多 android 设备在硬件级别或系统软件级别存在 GPS 问题。查看常见问题解答了解更多详情。