React Native Mapbox GL 介绍
React Native Mapbox GL 是绑定 Mapbox GL 地图的
React Native 组件。
安装：
npm install react-native-mapbox-gl --save
示例：
'use strict';
var React = require('react-native');
var MapboxGLMap = require('react-native-mapbox-gl');
var mapRef = 'mapRef';
var {
AppRegistry,
StyleSheet,
View,
Text,
StatusBarIOS,
} = React;
var map = React.createClass({
mixins: [MapboxGLMap.Mixin],
getInitialState() {
return {
mapLocation: {
latitude: 0,
longitude: 0
},
center: {
latitude: 40.72052634,
longitude: -73.97686958312988
},
zoom: 11,
direction: 40,
annotations: [{
latitude: 40.72052634,
longitude: -73.97686958312988,
title: 'This is marker 1',
},{
latitude: 40.714541341726175,
longitude: -74.00579452514648,
subtitle: 'Neat, this is a subtitle'
}]
}
},
onChange(e) {
this.setState({ currentZoom: e.zoom });
},
onUpdateUserLocation(location) {
console.log(location)
},
onOpenAnnotation(annotation) {
console.log(annotation)
},
render: function() {
StatusBarIOS.setHidden(true);
return (
<View style={styles.container}>
<Text style={styles.text} onPress={() => this.setDirectionAnimated(mapRef, 0)}>
Set direction to 0
</Text>
<Text style={styles.text} onPress={() => this.setZoomLevelAnimated(mapRef, 6)}>
Zoom out to zoom level 6
</Text>
<Text style={styles.text} onPress={() => this.setCenterCoordinateAnimated(mapRef, 48.8589, 2.3447)}>
Go to Paris at current zoom level {parseInt(this.state.currentZoom)}
</Text>
<Text style={styles.text} onPress={() => this.setCenterCoordinateZoomLevelAnimated(mapRef, 35.68829, 139.77492, 14)}>
Go to Tokyo at fixed zoom level 14
</Text>
<Text style={styles.text} onPress={() => this.addAnnotations(mapRef, [{
latitude: 40.73312,
longitude: -73.989,
title: 'This is a new marker',
}])}>
Add new marker
</Text>
<MapboxGLMap
style={styles.map}
direction={10}
rotateEnabled={true}
showsUserLocation={true}
ref={mapRef}
accessToken={'your-mapbox.com-access-token'}
styleURL={'asset://styles/mapbox-streets-v7.json'}
centerCoordinate={this.state.center}
userLocationVisible={true}
zoomLevel={this.state.zoom}
onRegionChange={this.onChange}
annotations={this.state.annotations}
onOpenAnnotation={this.onOpenAnnotation}
onUpdateUserLocation={this.onUpdateUserLocation}/>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1
},
map: {
flex:5,
},
text: {
padding: 2
}
});
AppRegistry.registerComponent('yourProjectName', () => map);
React Native Mapbox GL 官网
https://github.com/bsudekum/react-native-mapbox-gl
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。