开发

one_stop_public/libs/LocationCom.js

@@ -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} />
          
           );
         

one_stop_public/location/components.jsx

 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,11 +9,50 @@ const AMapUI = window.AMapUI
 class GetLocation extends Component {
   constructor(props) {
     super(props)
+    this.mapId=UUID.v4()
     this.state = {
       selectionCenter: []
+      
+    }
+  }
+  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() { 
+   
+
   }
-  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()
       // /**
       //  * 只查询到城市
@@ -59,7 +106,7 @@ class GetLocation extends Component {
     function onError(data) {
       var str = '定位失败,';
       str += '错误信息：'
-        switch(data.info) {
+      switch (data.info) {
         case 'PERMISSION_DENIED':
           str += '浏览器阻止了定位操作';
           break;
@@ -77,6 +124,23 @@ class GetLocation extends Component {
       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>
     )
   }

one_stop_public/location/index.jsx

@@ -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 }}>

one_stop_public/location/styles.less

@@ -9,7 +9,6 @@
 .top{
     position: absolute;
     left:20px;
-    top:65px;
     height: 36px;
     width: 90%;
     z-index: 88;

one_stop_public/tableCompon/index.jsx

@@ -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}