《React-Native系列》36、 ReactNative地图组件

原创 2016年09月30日 15:03:58

写在前面的话:

明天就国庆了,祝伟大的祖国母亲节日快乐!


今天,介绍地图组件。

ReactNative官方提供了一个MapView的组件,我们先来说说它吧。

先来看下他的API吧。

iOS  annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}] 
地图上的标注点,可以带有标题及副标题。

ios  legalLabelInsets {top: number, left: number, bottom: number, right: number} 
地图上标签的合法范围。默认在地图底部左侧。参见EdgeInsetsPropType.js了解更多信息。

ios  mapType enum('standard', 'satellite', 'hybrid') 
要显示的地图类型。
standard: 标准道路地图(默认)。
satellite: 卫星视图。
hybrid: 卫星视图并附带道路和感兴趣的点标记。

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

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

ios  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字段。否则它会没有任何提示而直接失败!

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

Android  active bool 


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

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


我们看下面的一个Demo代码。


[javascript]
 view plain copy
 在CODE上查看代码片派生到我的代码片
  1. import React, { Component } from 'react';  
  2. import {  
  3.   AppRegistry,  
  4.   StyleSheet,  
  5.   Text,  
  6.   View,  
  7.   MapView,  
  8. } from 'react-native';  
  9.   
  10. class baiduMapDemo extends Component {  
  11.   render() {  
  12.     return (  
  13.       <MapView  
  14.         style={styles.map}  
  15.         onRegionChangeComplete={()=>{}}  
  16.         region={{  
  17.           latitude: 40.027737,  
  18.           longitude:116.403694,  
  19.           latitudeDelta: 1,  
  20.           longitudeDelta: 0.5,  
  21.         }}  
  22.         annotations={[{  
  23.           longitude: 116.403694,  
  24.           latitude: 40.027737,  
  25.           title: 'I am Here!',  
  26.         }]}  
  27.       />  
  28.     );  
  29.   }  
  30. }  
  31. const styles = StyleSheet.create({  
  32.     map: {  
  33.       marginTop:64,  
  34.       height: 350,  
  35.       margin: 10,  
  36.       borderWidth: 1,  
  37.       borderColor: '#000000',  
  38.     }  
  39. });  
  40.   
  41. AppRegistry.registerComponent('baiduMapDemo', () => baiduMapDemo);  

代码显示效果如下图:



好,下面一篇文章再介绍个开源的百度地图组件吧。


版权声明:本文为博主原创文章,未经博主允许不得转载。

《React-Native系列》37、 ReactNative百度地图开源组件使用

上一篇文章写了ReactNative自带的MapView,很显然不是我们想要的。今天我们介绍一下一个开源的百度地图开源组件,详细描述它的使用方法。开源地址:https://github.com/lov...
  • hsbirenjie
  • hsbirenjie
  • 2016年09月30日 16:26
  • 10156

react-native试玩(9)-地图视图

MapView 属性 名称 类型 意义 默认 annotations [{latitude: number, longitude: number, animateDrop: bo...
  • qhshiniba
  • qhshiniba
  • 2015年09月06日 18:26
  • 3677

React Native之ScrollView通过map()方法动态加载数组

大家好,时隔几天,我又开始更新新的博文了,最近由于有新的学习任务,比较头疼,加上刚刚过去的清明假期去长城锻炼身体了(微信公众号有彩蛋哦,欢迎关注),闲置了几天时间,所以今天赶紧的再来一发。上次写的关于...
  • woshizisezise
  • woshizisezise
  • 2016年04月06日 10:03
  • 12032

react-native-baidu-map在react-native中的使用

转载请注明地址:http://write.blog.csdn.net/mdeditorgithub官网地址: https://github.com/lovebing/react-native-bai...
  • sinat_37059404
  • sinat_37059404
  • 2017年06月16日 12:33
  • 2246

react与native异步交互的几种方式

1:通过函数回调,传递一个string或者一个object 不能传递json如果想传递json格式 可以将json转成string 到react端再解析会json 2:通过promise 使用asyn...
  • u014041033
  • u014041033
  • 2016年03月08日 16:56
  • 8883

React-Native常用的几个基本类库

Flex可视化在线工具 http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&flex-directio...
  • qq_25404567
  • qq_25404567
  • 2017年02月22日 22:38
  • 4676

在React Native中使用 高德地图组件react-native-amap3d

本文主要介绍高德react-native-amap3d组件的使用。 react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS,受 react-native-m...
  • IT_luntan
  • IT_luntan
  • 2018年01月05日 16:09
  • 246

react-native 实现百度地图(ios&Android)

最近公司需要在app上使用地图组件加载地图,从网上找了很多第三方都不是很理想,总会有ios和Android不兼容的问题,后来在GitHub上看到了react-native-baidu-map,觉得可以...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月31日 22:03
  • 7331

React Native中react-native-baidu-map的安装与使用

http://www.jianshu.com/p/be802c38e9f5 参考资料: github官方网址 :https://github.com/lovebing/react-...
  • sinat_17775997
  • sinat_17775997
  • 2017年05月24日 11:20
  • 1604

React-Native系列Android——通信数据模型分析

无论是计算机领域还是日常生活中,我们所言的通信,其核心都是数据信息的交换,而数据模型的优劣对通信效率有着决定性的作用。...
  • MegatronKings
  • MegatronKings
  • 2016年05月15日 15:06
  • 7830
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:《React-Native系列》36、 ReactNative地图组件
举报原因:
原因补充:

(最多只允许输入30个字)