- 授权协议: 未知
- 开发语言: Objective-C JavaScript
- 操作系统: 跨平台
- 软件首页: https://github.com/bsudekum/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);Code Reading
Diomidis Spinellis / Addison-Wesley Professional / 2003-06-06 / USD 64.99
This book is a unique and essential reference that focuses upon the reading and comprehension of existing software code. While code reading is an important task faced by the vast majority of students,......一起来看看 《Code Reading》 这本书的介绍吧!
