/**
*地图定位
*/
import React, { Component } from \'react\';
import { ActionSheet } from \'antd-mobile\';
import { connect } from \'dva\';
// const isIPhone = new RegExp(\'\\biPhone\\b|\\biPod\\b\', \'i\').test(window.navigator.userAgent);
// let wrapProps;
// if (isIPhone) {
// wrapProps = {
// onTouchStart: e => e.preventDefault()
// };
// }
class MapLocation extends Component {
constructor(props) {
super(props);
this.state = {
headState: {
title: \'地图定位\',
leftImage: true
},
content: \'\', // 内容
address: \'\',
imageData: []
};
}
componentDidMount() {
const BMap = window.BMap;
const map = new BMap.Map("map"); // 创建Map实例
baidumap_location.getCurrentPosition((result) => {
// const geolocation = new BMap.Geolocation();
// geolocation.getCurrentPosition((result) => {
const latitude = parseFloat(result.latitude);
const lontitude = parseFloat(result.longitude);
console.log(`baidumap:${latitude}:${lontitude}`);
const point = new BMap.Point(lontitude, latitude);// 34.7534880000,113.6313490000
map.addControl(new BMap.NavigationControl());
// map.addControl(new BMap.GeolocationControl());
// map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point));
const gc = new BMap.Geocoder(); // 初始化，Geocoder类
gc.getLocation(point, (rs) => { // getLocation函数用来解析地址信息，分别返回省市区街等
let province = 0; // 获取省份
let city = 0; // 获取城市
let district = 0; // 区
let street = 0; // 街
let streetNumber = 0; // 街
let business = 0; // 建筑
const addComp = rs.addressComponents;
province = addComp.province; // 获取省份
city = addComp.city; // 获取城市
district = addComp.district; // 区
street = addComp.street; // 街
streetNumber = addComp.streetNumber; // 街
business = addComp.business; // 商业建筑
// alert(business);
if (business === undefined) {
this.setState({
address: `${province}${city}${district}${street}${streetNumber}`
});
// document.getElementById("LabelAddress").innerText = `${province}${city}${district}${street}${streetNumber}`;
} else {
this.setState({
address: `${province}${city}${district}${street}${streetNumber}`
});
// document.getElementById("LabelAddress").innerText = `${province}${city}${district}${street}${streetNumber}${business}`;
}
});
});
}
// 内容
content = (value) => {
this.setState({
content: value
});
}
showActionSheet = (e) => {
const me = this;
const BUTTONS = [\'相册\', \'拍照\', \'取消\'];
ActionSheet.showActionSheetWithOptions({
options: BUTTONS,
cancelButtonIndex: BUTTONS.length - 1,
destructiveButtonIndex: BUTTONS.length - 2,
// title: \'标题\',
message: \'\',
maskClosable: true,
\'data-seed\': \'logId\',
wrapProps
},
(buttonIndex) => {
if (buttonIndex === 0) {
me.selectImg(Camera.PictureSourceType.PHOTOLIBRARY);
}
if (buttonIndex === 1) {
me.selectImg(Camera.PictureSourceType.CAMERA);
}
});
}
selectImg = (sourceType) => {
// Toast.info(\'开发中...\', 1);// 显示错误信息
const me = this;
const options = {
quality: 45,
targetWidth: 1000,
targetHeight: 1000,
destinationType: Camera.DestinationType.DATA_URL,
sourceType// 获取本地图片
};
console.log(\'call getPicture\');
navigator.camera.getPicture(
(imageSource) => {
console.log(`getPicture success:${imageSource}`);
this.setState({ imageData: [imageSource] });
},
(message) => {
console.log(\'getPicture error:\');
console.log(message);
// We typically get here because the use canceled the photo operation. Fail silently.
}, options);
}
render() {
return (
<div className="wrap dis-fx flex-direction">
<div className="dis-fx flex-direction flex1 pd15">
<div className=" m-list-content flex1" style={{ height: \'100%\' }}>
<div className="m-card m-card-bg m-card-radius dis-fx flex-direction overflow" style={{ height: \'100%\' }}>
<div className="m-card-body aMain flex1 pd15">
<div className="dis-fx alc-start bb1 pb15">
<span className="m-user-img m-user-img-noBorder">
<img src={require(\'../assets/images/head-img.png\')} alt="" />
</span>
</div>
<div className="m-map pt15 pb15 bb1 mb15">
<div className="m-map-time">星期日: 2018/02/03</div>
<div className="m-map-box dis-fx">
<div className="flex1">
<div id=\'map\' style={{ width: \'2.2rem\', height: \'1.8rem\' }} />
</div>
<div className="m-map-addr">
{this.state.address}
</div>
</div>
</div>
<div className="m-filter-list-row dis-fx alc-start pt15 pb15">
<h4 className="width20 fwn lightgrey fs14">图片</h4>
<div className="">
<div className="dis-fx alc" onClick={this.showActionSheet}>
<div className="flex1">
{this.state.imageData.length > 0 ? <img style={{ width: \'0.4rem\', height: \'0.4rem\' }} src={`data:image/jpeg;base64,${this.state.imageData[0]}`} alt="" /> : <div className="m-addImg"><i className="iconfont icon-addApp" /></div>}
</div>
</div>
</div>
</div>
</div>
<div className="m-card-footer m-card-footer-padding">
<a className="m-btn-big m-btn-gradient-pink m-btn-radius dis-bk">签到</a>
</div>
</div>
</div>
</div>
</div>
);
}
}
function mapStateToProps() {
return {
};
}
export default connect(mapStateToProps)(MapLocation);