公司地址变成地图选择地址

2c
1 parent 358d6e00
Showing 3 changed files with 150 additions and 4 deletions
trash-ui/src/views/unit/enterprise/info.vue
trash-unit/src/main/java/com/trash/enterprise/domain/TransportationEnterprise.java
trash-unit/src/main/resources/mapper/unit/TransportationEnterpriseMapper.xml
@@ -60,7 +60,7 @@
       <el-row :gutter="30">
         <el-col :span="7">
           <el-form-item label="办公地址" prop="officeAddress">
-            <el-input v-model="form.officeAddress" placeholder="请输入内容" />
+            <el-input v-model="form.officeAddress" placeholder="请输入内容" @focus="openMapDialog"/>
           </el-form-item>
         </el-col>
         <el-col :span="7">
@@ -339,6 +339,40 @@
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>
     </div>
+    <el-dialog title="高德地图" :visible.sync="openMap" width="1600px" height="750px" append-to-body>
+      <div class="serach_map">
+        搜索：
+        <el-select
+          v-model="keywords"
+          filterable
+          remote
+          placeholder="请输入关键词"
+          :remote-method="remoteMethod"
+          :loading="loading"
+          :clearable="true"
+          size="mini"
+          @change="currentSelect"
+          style="width: 250px"
+        >
+          <el-option
+            v-for="item in mapOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item"
+            class="one-text"
+          >
+            <span style="float: left">{{ item.name }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.district
+              }}</span>
+          </el-option>
+        </el-select>
+      </div>
+      <div v-loading="loading" id="enterpriseContainer" class="am-map" style="width:100%;height: 700px;"></div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="openMap = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
  
@@ -347,10 +381,15 @@ import { listEnterprise, getEnterprise, delEnterprise, addEnterprise, updateEnte
 import Treeselect from "@riophae/vue-treeselect";
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import {getAreaList} from "@/api/casefile/remoteServer";
+import AMapLoader from '@amap/amap-jsapi-loader';
  
+// 设置安全密钥
+window._AMapSecurityConfig = {
+  securityJsCode: 'aa1db7d8f534f3da3f6d8a6a71382802',
+}
 export default {
   name: "DisposalSite",
-  components: {Treeselect},
+  components: {Treeselect,AMapLoader},
   data() {
     return {
       // 遮罩层
@@ -371,6 +410,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      openMap: false,
       // 表单参数
       form: {},
       // 表单校验
@@ -435,9 +475,16 @@ export default {
       safetyCertificate:[],
       // 停车场全景图
       carParkPanorama:[],
-      enterpriseList:[]
+      enterpriseList:[],
+      // 地图
+      map: null,
+      keywords: "",
+      mapOptions: [],
+      AutoComplete: null,
+      searchMarker: null,
     };
   },
+
   created() {
     getAreaList().then(res => {
       this.areas = res.data;
@@ -454,6 +501,90 @@ export default {
     '$route.query.enterpriseId': 'initData'
   },
   methods: {
+    openMapDialog(){
+      this.openMap = true;
+      if(this.map==null){
+        this.initAMap();
+      }
+    },
+    // 选中提示
+    currentSelect(val) {
+      console.log(val);
+      // 清空时不执行后面代码
+      if (!val) {
+        return ;
+      }
+      // 自动适应显示想显示的范围区域
+      this.map.setFitView();
+      //清除marker
+      if (this.searchMarker){
+        this.map.remove(this.searchMarker)
+      }
+      //设置marker
+      this.searchMarker = new AMap.Marker({
+        map: this.map,
+        position: [val.location.lng, val.location.lat],
+      });
+
+      this.keywords = val.name
+      //定位
+      this.map.setCenter([val.location.lng, val.location.lat])
+      this.form.officeAddressGps = val.location.lng+","+val.location.lat;
+      this.form.officeAddress = val.district + val.name;
+    },
+    // 搜索地址
+    remoteMethod(query) {
+      if (query !== "") {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+          this.AutoComplete.search(query, (status, result) => {
+            this.mapOptions = result.tips;
+          });
+        }, 200);
+      } else {
+        this.mapOptions = [];
+      }
+    },
+    initAMap() {
+      const _this = this
+      // 加载高德地图
+      AMapLoader.load({
+        key: _this.$aMapKey,  //设置高德地图申请的key
+        version: "2.0",  // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ['AMap.ToolBar', 'AMap.PolygonEditor','AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        AMapUI: {
+          version: "1.1",
+          plugins: []
+        },
+        Loca: {
+          version: "2.0"
+        },
+      }).then(async (AMap) => {
+        _this.map = await new AMap.Map("enterpriseContainer", { //设置地图容器id
+          viewMode: "2D",  // 默认使用 2D 模式
+          center: [113.01814545605467, 28.201039299894283], // 初始化地图中心点位置
+          zoom: 11, //初始化地图层级
+          resizeEnable: true,
+          willreadoften: true
+        });
+
+        _this.AutoComplete = await new AMap.AutoComplete({city:'长沙'});
+
+        // 图层样式切换控件(卫星图)
+        AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
+          //图层切换控件
+          _this.map.addControl(new BasicControl.LayerSwitcher({
+            position: 'rb' // 右下角
+          }));
+
+        });
+      }).catch(e => {
+        console.log(e);
+      });
+      this.loading = false;
+      // this.openMap = false;
+    },
     reset(){
       this.form = {};
       this.transportPermission = [];
@@ -52,6 +52,9 @@ public class TransportationEnterprise extends BaseEntity
     @Excel(name = "办公地址")
     private String officeAddress;
  
+    /** 办公地址gps,经纬度 */
+    private String officeAddressGps;
+
     /** 停车场位置 */
     @Excel(name = "停车场位置")
     private String parkingLotLocation;
@@ -126,6 +129,14 @@ public class TransportationEnterprise extends BaseEntity
     @Excel(name = "公司类型")
     private String servicePhone;
  
+    public String getOfficeAddressGps() {
+        return officeAddressGps;
+    }
+
+    public void setOfficeAddressGps(String officeAddressGps) {
+        this.officeAddressGps = officeAddressGps;
+    }
+
     public String getServicePhone() {
         return servicePhone;
     }
@@ -13,6 +13,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
         <result property="enterDate"    column="enter_date"    />
         <result property="businessLicenseDate"    column="business_license_date"    />
         <result property="officeAddress"    column="office_address"    />
+        <result property="officeAddressGps"    column="office_address_gps"    />
         <result property="parkingLotLocation"    column="parking_lot_location"    />
         <result property="parkingArea"    column="parking_area"    />
         <result property="carNumber"    column="car_number"    />
@@ -42,7 +43,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
     </resultMap>
  
     <sql id="selectTransportationEnterpriseVo">
-        select id, name, abbreviation, registration_area, transport_permission_date, enter_date, business_license_date, office_address, parking_lot_location, parking_area, (select count(id) from car_info where company_id = te.id) car_number, safety_manager_name, safety_manager_phone, social_uniform_credit_code_number, legal_representative, legal_representative_phone, safety_people_name, remark, transport_permission, enterprise_business_license, safety_officer_qualification_certificate, safety_certificate, car_park_panorama, business_unit, status, create_time, create_by, update_time, update_by, parent_id, company_type, credit_status, qr_code,service_phone from transportation_enterprise te
+        select id, name, abbreviation, registration_area, transport_permission_date, enter_date, business_license_date, office_address, parking_lot_location, parking_area, (select count(id) from car_info where company_id = te.id) car_number, safety_manager_name, safety_manager_phone, social_uniform_credit_code_number, legal_representative, legal_representative_phone, safety_people_name, remark, transport_permission, enterprise_business_license, safety_officer_qualification_certificate, safety_certificate, car_park_panorama, business_unit, status, create_time, create_by, update_time, update_by, parent_id, company_type, credit_status, qr_code,service_phone,office_address_gps from transportation_enterprise te
     </sql>
  
     <select id="selectTransportationEnterpriseList" parameterType="TransportationEnterprise" resultMap="TransportationEnterpriseResult">
@@ -120,6 +121,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
             <if test="creditStatus != null">credit_status,</if>
             <if test="qrCode != null">qr_code,</if>
             <if test="servicePhone != null">service_phone,</if>
+            <if test="officeAddressGps != null">office_address_gps,</if>
          </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="name != null">#{name},</if>
@@ -155,6 +157,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
             <if test="creditStatus != null">#{creditStatus},</if>
             <if test="qrCode != null">#{qrCode},</if>
             <if test="servicePhone != null">#{servicePhone},</if>
+            <if test="officeAddressGps != null">#{officeAddressGps},</if>
          </trim>
     </insert>
  
@@ -194,6 +197,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
             <if test="creditStatus != null">credit_status = #{creditStatus},</if>
             <if test="qrCode != null">qr_code = #{qrCode},</if>
             <if test="servicePhone != null">service_phone = #{servicePhone},</if>
+            <if test="officeAddressGps != null">office_address_gps = #{officeAddressGps},</if>
         </trim>
         where id = #{id}
     </update>