保持自定义标记居中的React Native Maps
创始人
2024-11-22 02:30:56
0

要在React Native Maps中保持自定义标记居中,可以使用region属性来控制地图的显示区域,并使用Camera组件来设置地图的中心点。

下面是一个示例代码,展示了如何实现这个功能:

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker, Camera } from 'react-native-maps';

const App = () => {
  const [mapRegion, setMapRegion] = useState({
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  });

  const markerCoordinate = {
    latitude: 37.78825,
    longitude: -122.4324,
  };

  return (
    
      
        
          {/* 添加自定义标记的内容 */}
          
            {/* 在标记中心添加自定义内容 */}
            
          
        
        {/* 通过Camera组件设置地图中心点 */}
        
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  customMarker: {
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
  },
  markerContent: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: 'white',
  },
});

export default App;

在这个示例中,我们首先使用useState hook来设置地图的初始显示区域。然后,我们定义了一个markerCoordinate对象,表示自定义标记的坐标。

MapView组件中,我们使用region属性将地图的显示区域设置为mapRegion。然后,我们在Marker组件中添加自定义标记的内容,这里使用了一个红色的圆形视图作为标记的背景,并在中心位置添加了一个白色小圆点。

最后,我们使用Camera组件将地图的中心点设置为markerCoordinate,并设置了一个适当的缩放级别。

你可以根据需要修改自定义标记的样式和地图的显示区域,以满足你的需求。

相关内容

热门资讯

三分钟了解!微信九游大厅辅助!... 三分钟了解!微信九游大厅辅助!切实是有辅助工具(今日头条)-哔哩哔哩微信九游大厅辅助是不是有人用挂微...
八分钟了解!科乐填大坑辅助器!... 八分钟了解!科乐填大坑辅助器!真是有辅助攻略(有挂透视)-哔哩哔哩1、在科乐填大坑辅助器插件功能辅助...
5分钟了解!蛮籽酉阳大贰辅助!... 5分钟了解!蛮籽酉阳大贰辅助!真是是有辅助攻略(有挂功能)-哔哩哔哩1、玩家可以在蛮籽酉阳大贰辅助线...
三分钟了解!竞技联盟辅助!真是... 您好,竞技联盟辅助这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302】很多玩家在...
十分钟了解!辅助软件购买平台!... 十分钟了解!辅助软件购买平台!本来是真的有辅助app(有挂神器)-哔哩哔哩1、完成辅助软件购买平台有...
第七分钟了解!广西友乐app辅... 您好,广西友乐app辅助工具这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302】...
第7分钟了解!微乐小程序游戏破... 第7分钟了解!微乐小程序游戏破解器!好像是真的有辅助软件(有挂讲解)-哔哩哔哩1、该软件可以轻松地帮...
第1分钟了解!jj斗地主有透视... 第1分钟了解!jj斗地主有透视吗!切实真的是有辅助攻略(新版有挂)-哔哩哔哩1、在jj斗地主有透视吗...
第3分钟了解!楚天游卡五星辅助... 第3分钟了解!楚天游卡五星辅助器!总是一直总是有辅助技巧(有挂教学)-哔哩哔哩1、第3分钟了解!楚天...
8分钟了解!hhpoker辅助... 8分钟了解!hhpoker辅助是真的吗!都是是有辅助神器(有挂方针)-哔哩哔哩1、完成hhpoker...