提交 44b4a5ba authored 作者: tb53863844's avatar tb53863844

开发

上级 9df512f7
......@@ -11,9 +11,8 @@ export default class LocationCom extends React.Component {
this.state = {
lng:value.lng,
lat:value.lat,
address:value.address
address:value.address,
params:{}
}
}
......@@ -30,6 +29,7 @@ export default class LocationCom extends React.Component {
// Should be a controlled component.
if ('value' in nextProps) {
const value = nextProps.value;
this.setState(value);
}
}
......@@ -43,10 +43,11 @@ export default class LocationCom extends React.Component {
}
render() {
const{btnName,btnSucName,width,showMap,get}=this.props
const {lng,lat,address}=this.state
const{btnName,btnSucName,width,showMap,get,json,showLocation}=this.props
const {lng,lat,address,params}=this.state
return (
<Location onChange={this.changePos} get={get} btnName={lng!=null?btnSucName:btnName} showMap={showMap} width={width} />
<Location json={json} params={params} lng={lng} lat={lat} address={address} onChange={this.changePos} get={get} btnName={lng!=null?btnSucName:btnName} showMap={showMap} showLocation={showLocation} width={width} />
);
......
import React, { Component } from 'react'
import styles from './styles.less'
import UUID from 'react-native-uuid';
const AMap = window.AMap
const AMapUI = window.AMapUI
//思路进入页面时先定位
......@@ -8,12 +9,51 @@ const AMapUI = window.AMapUI
class GetLocation extends Component {
constructor(props) {
super(props)
this.mapId=UUID.v4()
this.state = {
selectionCenter: []
}
}
componentWillMount() {}
componentDidMount = () => {
map;
valueString;
fugai=[]
componentWillReceiveProps(nextProps) {
const{lng,lat,params}=nextProps
const vs = JSON.stringify({lng,lat,params})
if(vs!=this.valueString){
this.updateMap(lng,lat,params);
this.valueString=vs;
}
}
updateMap=(lng,lat,params)=>{
this.map.remove(this.fugai);
this.fugai.length = 0
this.map.center=[lng ? lng : 116.397428, lat ? lat : 39.90923]
if (params && params.polygons) {
for (var i = 0; i < params.polygons.length; i++) {
const p = params.polygons[i]
const path = p.path
const paths = []
for (var j = 0; j < path.lngs.length; j++) {
paths.push(new AMap.LngLat(path.lngs[j], path.lats[j]))
}
var polygon = new AMap.Polygon({
...p,
path: paths
});
this.map.add(polygon);
this.fugai.push(polygon)
}
}
}
componentWillMount() {
}
componentDidMount = () => {
this.getLocation()
this.searchSiteSelection()
}
......@@ -23,22 +63,29 @@ class GetLocation extends Component {
/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
***************************************/
let map, geolocation
let geolocation
const { lng, lat, params,json } = this.props
//加载地图,调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true
this.map = new AMap.Map(this.mapId, {
resizeEnable: true,
zoom: json.zoom||14,//级别
center: [lng ? lng : 116.397428, lat ? lat : 39.90923],//中心点坐标
viewMode: '3D'//使用3D视图
})
map.plugin('AMap.Geolocation', () => {
this.map.plugin('AMap.Geolocation', () => {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 1000000, //超过10秒后停止定位,默认:无穷大
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonPosition: 'RB',
GeoLocationFirst:true,
GeoLocationFirst: true,
})
map.addControl(geolocation)
this.map.addControl(geolocation)
geolocation.getCurrentPosition()
// /**
// * 只查询到城市
......@@ -58,25 +105,42 @@ class GetLocation extends Component {
//解析定位错误信息
function onError(data) {
var str = '定位失败,';
str += '错误信息:'
switch(data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
str += '错误信息:'
switch (data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
console.log(str)
}
console.log(str)
}
AMapUI.loadUI(['control/BasicControl'], (BasicControl) =>{
//缩放控件
this.map.addControl(new BasicControl.Zoom({
position: 'lt', //left top,左上角
showZoomNum: true //显示zoom值
}));
//图层切换控件
this.map.addControl(new BasicControl.LayerSwitcher({
position: 'rt' //right top,右上角
}));
});
}
//通过搜索来获取定位信息
searchSiteSelection = () => {
......@@ -131,10 +195,11 @@ class GetLocation extends Component {
})
}
render() {
const{json}=this.props
return (
<div id="GetLocation" style={{display:this.props.showMap?"block":"none"}}>
<input id="pickerInput" className={styles.top} placeholder="输入关键字选取地点" />
<div id="map" className={styles.map}></div>
<div id="GetLocation" style={{ display: this.props.showMap ? "block" : "none" }}>
<input id="pickerInput" className={styles.top} style={{ width: 200 }} placeholder="输入关键字选取地点" />
<div id={this.mapId} className={styles.map} style={{ width:json.width, height:json.height}}></div>
</div>
)
}
......
......@@ -84,17 +84,18 @@ export default class location extends Component {
}
render() {
let { locationMsg,btn } = this.state
console.log(locationMsg)
let {lat,lng,address,params,json,showLocation} = this.props
return (<div style={{display: "flex"}}>
<Location getLocationMsg={this.getLocationMsg.bind(this)} showMap={this.props.showMap}/>
<Popconfirm
<Location lat={lat} json={json} lng={lng} getLocationMsg={this.getLocationMsg.bind(this)} showMap={this.props.showMap} params={params}/>
<div style={{display:showLocation?"block":"none"}}> <Popconfirm
title={btn?'正在定位中':locationMsg.address}
onConfirm={this.confirm}
okText="提交"
cancelText="取消"
>
<Button disabled={btn} style={{margin:"auto",width:this.props.width}} loading={this.state.loading} className={styles.btn} type='primary'>{this.props.btnName}</Button>
</Popconfirm>
</Popconfirm></div>
</div>)
// return (
// <div style={{ paddingBottom: 49, paddingTop: 44 }}>
......
......@@ -9,7 +9,6 @@
.top{
position: absolute;
left:20px;
top:65px;
height: 36px;
width: 90%;
z-index: 88;
......
......@@ -2322,7 +2322,11 @@ export default class tableCom extends Component {
break;
case 'LocationCom':
cm = <span></span>;
cm = <span><LocationCom get={get}
btnName={json.btnName}
btnSucName={json.btnSucName}
width={json.width} json={json}
showMap={json.showMap} value={obj[dataColumn.base52]}/></span>;
break;
case 'Table':
......@@ -2994,6 +2998,7 @@ export default class tableCom extends Component {
})(
<LocationCom
get={get}
json={json}
btnName={json.btnName}
btnSucName={json.btnSucName}
width={json.width}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论