React native学习第十一章:MapView

最新推荐文章于 2023-04-15 20:32:56 发布

小波波1992

最新推荐文章于 2023-04-15 20:32:56 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： React Native

本文链接：https://blog.youkuaiyun.com/aa654403231/article/details/64124831

React Native 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了React Native中地图组件的使用方法，包括如何设置地图的类型、显示区域、标注点、覆盖层等特性，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}]

地图上的标注点，可以带有标题及副标题。

legalLabelInsets {top: number, left: number, bottom: number, right: number}

地图上标签的合法范围。默认在地图底部左侧。参见EdgeInsetsPropType.js了解更多信息。

mapType enum('standard', 'satellite', 'hybrid')

要显示的地图类型。

standard: 标准道路地图（默认）。
satellite: 卫星视图。
hybrid: 卫星视图并附带道路和感兴趣的点标记。

maxDelta number

可以被显示的最大区域尺寸。

minDelta number

可以被显示的最小区域尺寸。

overlays [{coordinates: [{latitude: number, longitude: number}], lineWidth: number, strokeColor: ColorPropType, fillColor: ColorPropType, id: string}]

地图的覆盖层。

onAnnotationPress function

当用户点击地图上的标注之后会调用此回调函数一次。

onRegionChange function

在用户拖拽地图的时候持续调用此回调函数。

onRegionChangeComplete function

当用户停止拖拽地图之后，调用此回调函数一次。

pitchEnabled bool

当此属性设为true并且地图上关联了一个有效的镜头时，镜头的抬起角度会使地图平面倾斜。当此属性设为false，镜头的抬起角度会忽略，地图永远都显示为俯视角度。

region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number}

地图显示的区域。

区域使用中心的坐标和要显示的范围来定义。

rotateEnabled bool

当此属性设为true并且地图上关联了一个有效的镜头时，镜头的朝向角度会用于基于中心点旋转地图平面。当此属性设置为false时，朝向角度会被忽略，并且地图永远都显示为顶部方向为正北方。

scrollEnabled bool

如果此属性设为false，用户不能改变地图所显示的区域。默认值为true。

showsUserLocation bool

如果此属性为true，应用会请求用户当前的位置并且聚焦到该位置。默认值是false。

注意：你需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段。否则它会没有任何提示而直接失败！

style View#style

zoomEnabled bool

如果此属性为false，用户则不能旋转/缩放地图。默认值为true。

active bool

showsCompass bool

如果此属性为false，地图上不会显示指南针。默认值为true。

showsPointsOfInterest bool

如果此属性为false，感兴趣的点不会在地图上显示。默认为true。

'use strict';

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  MapView,
} from 'react-native'
const styles=StyleSheet.create({
  map:{
    marginTop:64,
    height:350,
    margin:10,
    borderWidth:1,
    borderColor:'#000000',
  }
});
class  testMapView extends Component {
   render(){
     return(
       <MapView
          style={styles.map}
          onRegionChangeComplete={()=>{}}
          region={{
            latitude: 40.027737,
            longitude:116.403694,
            latitudeDelta: 1,
            longitudeDelta: 0.5,
          }}
          annotations={[{
            longitude: 116.403694,
            latitude: 40.027737,
            title: 'I am Here!',
          }]}
         
          />
     );
   }

}
AppRegistry.registerComponent('TestMapView', () => testMapView);