如何解决使地图视图适合标记,使带有“挂钩”,“功能”的原始地图反应
所以我有mapview:
myView.style(R.style.MyStyle)
,并缩短为两个条目的json文件:
import * as React from 'react';
import {
StyleSheet,View,Text,ScrollView,Animated,Dimensions,Image,} from "react-native";
import MapView,{Callout,Marker,PROVIDER_GOOGLE} from "react-native-maps";
import * as Location from 'expo-location';
QueryResult from '../../assets/Data.json'; //JSON FILE in desc
import {AppLoading} from "expo";
const styles = StyleSheet.create({
page: {
flex: 1,justifyContent: "center",alignItems: "center",backgroundColor: "#F5FCFF"
},container: {
flex:1,backgroundColor: "tomato"
},map: {
flex: 1
},bubble:{
backgroundColor: Colors.WHITE1,borderRadius: 20,flexDirection: "column",},name:{
},icon:{
width: 30,height:30,});
const { width,height } = Dimensions.get("window");
function GoogleMapItem() {
const initialRegion = {
latitude: 53.3661,longitude: 14.5943,}
const navigation = useNavigation();
const [location,setLocation] = React.useState(initialRegion);
const [errorMsg,setErrorMsg] = React.useState(null);
const mapRef = React.useRef()
const [QueryResult,SetQueryResult] = React.useState(null);
let iz ={
latDelta: 0.015,longDelta: 0.08,}
let ZOOMS = {
_latitudeDeltaZOOM_OUT1 : iz.latDelta,_longitudeDeltaZOOM_OUT1: iz.longDelta,_latitudeDeltaZOOM_INITIAL : iz.latDelta*0.2,_longitudeDeltaZOOM_INITIAL: iz.longDelta*0.2,_latitudeDeltaZOOM_IN1 : iz.latDelta*0.1,_longitudeDeltaZOOM_IN1: iz.longDelta*0.1,}
React.useEffect(() => {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
}
let location = await Location.getCurrentPositionAsync({});
const {longitude,latitude} = location.coords
setLocation({
...location,longitude: longitude,latitude: latitude,})
})();
},[]);
return(
<View style={styles.map}>
<MapView style={styles.map}
provider={PROVIDER_GOOGLE}
loadingEnabled={true}
region={{
latitude: location.latitude,longitude: location.longitude,latitudeDelta: ZOOMS._latitudeDeltaZOOM_OUT1,longitudeDelta: ZOOMS._latitudeDeltaZOOM_OUT1,}}
showsUserLocation
followsUserLocation
userLocationUpdateInterval
ref={mapRef}
>
{QueryResult.results.map((element,index)=>
<Marker key={index} identifier={element.place_id} coordinate={{
latitude: element.geometry.location.lat,longitude: element.geometry.location.lng,}}
>
<View>
<Image source={{uri: element.icon}} style={{width:25,height:25,}}></Image>
</View>
</Marker>
)}
</MapView>
</View>
)
}
export default React.memo(GoogleMapItem)
此视图正在从查询中呈现标记(带有餐厅或其他对象的视图) 我想适合mapview以查看所有可能的标记。
使用挂钩是否可行? (几乎所有互联网解决方案都使用:
{
"results" : [
{
"business_status" : "OPERATIONAL","geometry" : {
"location" : {
"lat" : 53.368006,"lng" : 14.6198066
},"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_recreational-71.png","name" : "Park Leśny Zdroje","place_id" : "ChIJ7adAEfunAEcRUlmcp_1ReY8",{
"business_status" : "OPERATIONAL","geometry" : {
"location" : {
"lat" : 53.3789812,"lng" : 14.6186994
},"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_business-71.png","name" : "Usługi Ogrodnicze Szczecin Miłorząb M.","place_id" : "ChIJxwSQa_SnAEcRsgtHuw_eeuE",],"status" : "OK"
}
,因此它需要类组件。
尝试过类似的事情:
{mapRef=> this.mapRef= mapRef}
将所有标记Lat,Lng添加到数组,然后:
OnMapReady or onLayout={ mapRef.current.fitToSuppliedMarkers(markerArray)}
OnMapReady or onLayout={ mapRef.current.fitToElements(true)}
也尝试过在useEffect中使用这些方法,但是它根本看不到mapRef(未定义mapRef)。
但是什么也没发生,我认为错误是在First Initial render上那些方法没有看到ref映射。 因为当我使用按钮调用方法时,它工作正常。
OnMapReady or onLayout={ mapRef.current.fitToCoordinates(markerArrayLatLng}
在带有钩子的函数中是否可行,还是需要将整个函数重新分配给类组件?
对不起,我的语言错误。
解决方法
followUserLocation会自动缩放到用户位置(太快了),以至于fitToElements和其他功能都不起作用(它们起作用但会立即缩放)。 所以我设置了超时时间。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。