适合坐标的内容在react原生地图中执行



有人能告诉我fitToCoordinates在React native(React native map(中做什么吗?

react原生地图在他们的文档中提到了这一点

| `fitToCoordinates` | `coordinates: Array<LatLng>, options: { edgePadding: EdgePadding, animated: Boolean }` | If called in `ComponentDidMount` in android, it will cause an exception. It is recommended to call it from the MapView `onLayout` event.

我无法理解。

我有一个简单的代码,其中标记总是在屏幕的中心

const updateLocationCordinate = (e:MapEvent) => {
const {latitude, longitude} = e.nativeEvent.coordinate
setLocationData({
...locationData, 
latitude,
longitude
})
}
return
<MapView 
loadingEnabled={true}
style={styles.map} 
provider="google"
region={{
latitude, 
longitude, 
latitudeDelta: LATITUDE_DELTA, 
longitudeDelta: LONGITUDE_DELTA
}}
>
<Marker 
draggable
coordinate={{
latitude, 
longitude
}}
title="Me"
onDragEnd={updateLocationCordinate}
/>
</MapView>

为什么我或人们会使用fitToCoordinates,这到底是怎么回事。

如果有人能用一些例子来解释,那就太有帮助了。

fitToCoordinates用于使您在坐标阵列中传递的所有坐标都适合地图上的视图。因此,如果你的数组中有多个坐标,它会确保它会包含在地图的视图中。

下面是一个代码示例,其中使用了fitToCoordinates,这样您可以在单击按钮时看到所有坐标。您可以在坐标阵列中添加坐标,以便查看其工作方式。

注意,经过测试,我发现如果你的坐标彼此相距太远,不适合最低的缩放级别,它只会显示这些坐标中心周围的区域。

import React, { useRef, useState} from 'react';
import { Text, View, StyleSheet, Modal, Button } from 'react-native';
import MapView, { PROVIDER_GOOGLE, Marker,Polyline } from 'react-native-maps';
export default function App() {
const position = {
latitude: 51,
longitude: -0.48,
};
const [coords, setCoords] = useState([
{ latitude: 37.766155, longitude: -122.51058 },
{ latitude: 37.7948605, longitude: -122.4596065 },
{ latitude: 37.799476, longitude: -122.397995 },
]);

const map = useRef();
async function fitMapToPolyline() {
map.current.fitToCoordinates(coords, {
edgePadding: {
top: 20,
right: 20,
bottom: 20,
left: 20,
},
});

}
return (
<View style={style.container}>
<Modal animationType={'slide'} visible={true}>
<MapView
ref={map}
style={[style.map]}
initialRegion={{
latitude: 37.7948605,
longitude: -122.4596065,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
provider={PROVIDER_GOOGLE}>
{coords.map((coords, index) => (
<Marker key={index} coordinate={coords} />
))}
<Polyline
coordinates={coords}
strokeColor={'rgb(0, 0, 0)'}
strokeWidth={6}
/>
</MapView>
<View style={style.button}>
<Button title={'Fit map to see whole Polyline'} onPress={fitMapToPolyline} />
</View>
</Modal>
</View>
);
}

const style = StyleSheet.create({
map: {
position: 'absolute',
width: '100%',
height: '100%',
},
button: {
position: 'absolute',
top: 100,
},
});

相关内容

  • 没有找到相关文章

最新更新