cordova项目

/**

*地图定位

*/

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);