如何在 react-native-map 中放大/缩小？

Posted 2023-02-23

【中文标题】如何在 react-native-map 中放大/缩小？

【英文标题】：How to zoom in/out in react-native-map?

【发布时间】：2016-04-18 04:13:30

【问题描述】：

我正在使用 react-native 来构建地图应用程序。我使用的 api 来自这个链接：https://github.com/lelandrichardson/react-native-maps。以下是我将地图带到我的应用程序的代码。我徘徊如何在该地图上给出缩放值。以及当用户单击地图上的按钮时如何更改缩放值。我应该使用什么缩放 API 来实现这一点？

import React, 


AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  TextInput,
  TouchableHighlight,
  Dimensions,
 //MapView,
 from 'react-native';

import MapView from 'react-native-maps';

const styles = StyleSheet.create(
  map: 
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  ,
  container: 
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 30,
    flex: 1,
    alignItems: 'center'
  ,
  inputText: 
    height: 36,
      padding: 4,
      marginRight: 5,
      flex: 4,
      fontSize: 18,
      borderWidth: 1,
      borderColor: '#48BBEC',
      borderRadius: 8,
      color: '#48BBEC'
  
);

class MapPage extends Component

    constructor(props)
        super(props);
        this.state = 
            region:
                latitude: 4.21048,
                longitude: 101.97577,
            latitudeDelta: 10,
            longitudeDelta: 5
            
        
    

    render() 
        return(
            <View style=styles.container>
                <TextInput style=styles.inputText></TextInput>
                <MapView 
                    style= styles.map 
                    mapType="standard"
                    region=this.state.region
                    zoomEnabled=true
                    scrollEnabled=true
                    showsScale=true
                  ></MapView>
            </View>
            )
    


module.exports = MapPage;

【参考方案1】：

您应该使用animateToRegion 方法（请参阅here）

它需要一个具有latitudeDelta 和longitudeDelta 的区域对象。使用这些设置缩放级别。

更新：

在Region 对象中，latitude 和 longitude 指定中心位置，latitudeDelta 和 longitudeDelta 指定可视地图区域的跨度。

这张来自this 博客文章的图片很好地说明了这一点（LatΔ 和 LngΔ）。

【讨论】：

纬度和纬度Delta有什么区别？有文件可以解释吗？

感谢您的回复。有没有例子来说明如何使用 animateToRegion？

是的，看这个例子：github.com/lelandrichardson/react-native-maps/blob/master/…

那么，如何使用自定义放大和缩小按钮设置增量？

【参考方案2】：

我能够使用Dimensions.get('window'); 完成这项工作

            const window = Dimensions.get('window');
            const  width, height   = window
            LONGITUDE_DELTA = LATITUD_DELTA + (width / height)

默认设置LATITUD_DELTA = 0.0922。 然后只需使用 <MapView> 中的道具 onRegionChangeComplete 更新此值

【讨论】：

它为什么给你不同的价值观？它指的是与地图缩放级别无关的恒定屏幕尺寸

我觉得应该是 LONGITUDE_DELTA = LATITUD_DELTA * (width / height)

@Shanaka 你为什么这么说？

本例采用这种方式：github.com/react-native-community/react-native-maps/blob/master/…

我们是如何得到 LATITUD_DELTA = 0.0922 的？这是什么意思？我们如何计算这个？

【参考方案3】：

新的 React Native Maps API 让您可以选择使用 zoom 参数调用 animateCamera 方法。

const MapComponent= (props: any) => 

const map: LegacyRef<MapView> = useRef(null);

const onZoomInPress = () => 
    map?.current?.getCamera().then((cam: Camera) => 
        cam.zoom += 1;
        map?.current?.animateCamera(cam);
    );
;

return (
        <View>
            <MapView
                ref=map
                provider=PROVIDER_GOOGLE
                region=region>
            </MapView>
            <ButtonComponent
                style=position: 'absolute', bottom: 400, left: 0
                onPress=onZoomInPress>
                Zoom In
            </MainButtonBlue>
        </View>
    );

【参考方案4】：

//Example of Pinch to Zoom Image in React Native
//https://aboutreact.com/react-native-pinch-to-zoom-image/

//import React in our code
import React from 'react';

//import all the components we are going to use
import  SafeAreaView, StyleSheet, View  from 'react-native';

//import ImageViewer which will help us to zoom Image
import ImageViewer from 'react-native-image-zoom-viewer';

const App = () => 
  const images = [
    
      url:
        'https://raw.githubusercontent.com/AboutReact/sampleresource/master/sample_img.png',
    ,
    
      url:
        'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
    ,
  ];

  return (
    <SafeAreaView style= flex: 1 >
      <View style=styles.container>
        <ImageViewer imageUrls=images renderIndicator=() => null />
      </View>
    </SafeAreaView>
  );
;

const styles = StyleSheet.create(
  container: 
    backgroundColor: '#F5FCFF',
    flex: 1,
  ,
);

export default App;

【参考方案5】：

这就是我所做的，对我来说效果很好：

function getRegion(origin, destination, zoom) 
  const oLat = Math.abs(origin.latitude);
  const oLng = Math.abs(origin.longitude);
  const dLat = Math.abs(destination.latitude);
  const dLng = Math.abs(destination.longitude);

  return 
      latitude: (origin.latitude + destination.latitude) / 2,
      longitude: (origin.longitude + destination.longitude) / 2,
      latitudeDelta: Math.abs(oLat - dLat) + zoom,
      longitudeDelta: Math.abs(oLng - dLng) + zoom,
  ;