react-native在IOS上集成百度舆图详解
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程序的执行
[*]兼容性和互用性
[*]可访问性
[*]安全性
[*]客户端框架
https://i-blog.csdnimg.cn/blog_migrate/62c4c4fed6b57055f43815c47e638e96.png
window对象
[*] 计时器
[*] 欣赏器定位和导航
[*] 欣赏汗青
[*] 欣赏器和屏幕信息
[*] 对话框
[*] 错误处理
[*] 作为window对象属性的文档元素
https://i-blog.csdnimg.cn/blog_migrate/1cd949d66344ac7af6e34afbdc348a6c.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]