export default class BaiDuMapTest extends Component {
render() {
return (
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
instructions: {
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
},
});
AppRegistry.registerComponent(‘BaiDuMapTest’, () => BaiDuMapTest);
BaiduMapDemo.js
/**
- @author lovebing
*/
import React, {
Component,
PropTypes
} from ‘react’;
import {
MapView,
MapTypes,
Geolocation
} from ‘react-native-baidu-map’;
import {
Button,
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} from ‘react-native’;
import Dimensions from ‘Dimensions’;
export default class BaiduMapDemo extends Component {
constructor() {
super();
this.state = {
mayType: MapTypes.NORMAL,
zoom: 15,
center: {
longitude: 113.981718,
latitude: 22.542449
},
trafficEnabled: false,
baiduHeatMapEnabled: false,
markers: [{
longitude: 113.981718,
latitude: 22.542449,
title: “Window of the world”
},{
longitude: 113.995516,
latitude: 22.537642,
title: “”
}]
};
}
componentDidMount() {
}
render() {
return (
<MapView
trafficEnabled={this.state.trafficEnabled}
baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
zoom={this.state.zoom}
mapType={this.state.mapType}
center={this.state.center}
marker={this.state.marker}
markers={this.state.markers}
style={styles.map}
onMarkerClick={(e) => {
console.warn(JSON.stringify(e));
}}
onMapClick={(e) => {
}}
<Button title=“Normal” onPress={() => {
this.setState({
mapType: MapTypes.NORMAL
});
}} />
<Button style={styles.btn} title=“Satellite” onPress={() => {
this.setState({
mapType: MapTypes.SATELLITE
});
}} />
<Button style={styles.btn} title=“Locate” onPress={() => {
console.warn(‘center’, this.state.center);
Geolocation.getCurrentPosition()
.then(data => {
console.warn(JSON.stringify(data));
this.setState({
zoom: 15,
marker: {
latitude: data.latitude,
longitude: data.longitude,
title: ‘Your location’
},
center: {
latitude: data.latitude,
longitude: data.longitude,
rand: Math.random()
}
});
})
.catch(e =>{
console.warn(e, ‘error’);
})
}} />
<Button title=“Zoom+” onPress={() => {
this.setState({
zoom: this.state.zoom + 1
});
}} />
<Button title=“Zoom-” onPress={() => {
if(this.state.zoom > 0) {
this.setState({
zoom: this.state.zoom - 1
});
}
}} />
<Button title=“Traffic” onPress={() => {
this.setState({
trafficEnabled: !this.state.trafficEnabled
});
}} />
<Button title=“Baidu HeatMap” onPress={() => {
this.setState({
baiduHeatMapEnabled: !this.state.baiduHeatMapEnabled
});
}} />
);
}
}
const styles = StyleSheet.create({
row: {
flexDirection: ‘row’,
height: 40
},
container: {
flex: 1,
justifyContent: ‘flex-start’,
web浏览器中的javascript
- 客户端javascript
- 在html里嵌入javascript
- javascript程序的执行
- 兼容性和互用性
- 可访问性
- 安全性
- 客户端框架
window对象
-
计时器
-
浏览器定位和导航
-
浏览历史
-
浏览器和屏幕信息
-
对话框
-
错误处理
-
作为window对象属性的文档元素
