地图

src/views/networkAccess/registration.vue

@@ -381,10 +381,10 @@
               <a-col :span="8">
                 <a-form-model-item label="工作地址" prop="userOpenState" v-bind="labelCol2">
                   <a-radio-group v-model="model.wordAddress" button-style="solid">
-                    <a-input v-model="mapAddress" placeholder="请输入工作地址"  @keyup="searchKeyWord" ></a-input>
+                    <a-input v-model="model.wordAddress" placeholder="请输入工作地址" @keyup="searchKeyWord('model.wordAddress')"  ></a-input>
                     <div class="map_search_result"   v-show="this.showsearchResult" >
                       <ul>
-                        <li  @click="markerResult(item)" v-for="(item,index) in poiList" :key="index">{{item.name}}</li>
+                        <li  @click="markerResult(item,'wordAddress')" v-for="(item,index) in poiList" :key="index">{{item.name}}</li>
                       </ul>
                     </div>
                   </a-radio-group>
@@ -393,7 +393,15 @@
               <a-col :span="8">
                 <a-form-model-item label="营业厅地址" prop="userOpenState" v-bind="labelCol2">
                   <a-radio-group v-model="model.businessAddress" button-style="solid">
-<!--                    <a-input v-model="model.businessAddress" disabled="" placeholder="请输入营业厅地址" ></a-input>--> <span style="color: blue">中国北京电信总部大楼</span>
+                    <!--                    <a-input v-model="model.businessAddress" disabled="" placeholder="请输入营业厅地址" ></a-input>--> <span style="color: blue">中国北京电信总部大楼</span>
+<!--                     <a-input v-model="model.businessAddress" disabled="" placeholder="请输入营业厅地址" ></a-input>-->
+                    <a-input v-model="model.businessAddress" placeholder="请输入营业厅地址"  @keyup="searchKeyWord('model.businessAddress')" ></a-input>
+                    <div class="map_search_result"   v-show="this.showsearchResultBusinessAddress" >
+                      <ul>
+                        <li  @click="markerResult(item,'businessAddress')" v-for="(item,index) in poiList" :key="index">{{item.name}}</li>
+                      </ul>
+                    </div>
+
                   </a-radio-group>
                 </a-form-model-item>
               </a-col>
@@ -440,7 +448,7 @@ import {httpAction, postAction, getAction} from "@api/manage";
 import {JeecgListMixin} from '@/mixins/JeecgListMixin'
 import AMapLoader from '@amap/amap-jsapi-loader'
 window._AMapSecurityConfig = {
-  securityJsCode: 'c4ab681cb7c3256184ae3557dc5beabb'  //填写你的安全密钥
+  securityJsCode: 'f762c44f71422cd56f90acc2a8e75144'  //填写你的安全密钥
 }
 
 export default {
@@ -450,7 +458,11 @@ export default {
 
   data() {
     return {
+      lnglats: [
 
+      ],
+      map:null,
+      lnglatMaps:new Map(),
       zoom: 18,
       center: [118.02, 24.48],
       searchOption: {
@@ -622,10 +634,11 @@ export default {
           { required: true, message: '证件名不可为空...', trigger: 'blur' }
         ]
       },
-      mapAddress:'',
+
       poiList:'',
       isSizeNumberResults:'',
       showsearchResult:true,
+      showsearchResultBusinessAddress:true,
       addressG:'',
       lnglat:{},
       distance:'',
@@ -711,7 +724,7 @@ export default {
     showInfoWindow(marker){
       let infoWindow = new AMap.InfoWindow({
         isCustom: true, //是否自定义信息窗体
-        content:  `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${this.mapAddress}</div>`,
+        content:  `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${this.model.wordAddress}</div>`,
         closeWhenClickMap: true,
         zIndex: 999,
         offset: new AMap.Pixel(16, -35)
@@ -729,19 +742,41 @@ export default {
       this.placeSearchComponent = new AMap.PlaceSearch()
     },
     //根据输入内容查询
-    searchKeyWord(){
-      this.showsearchResult = true;
+    searchKeyWord(data){
+
+
       let that= this
-      that.placeSearchComponent.search(that.mapAddress, function (status, result) {
-        if(status==='complete' && result.info === "OK"){
-          that.showsearchResult = true
-          that.poiList = result.poiList.pois
-        }else{
-          that.showsearchResult = false
-          that.poiList = []
-          //that.$message.warning("没有查到结果");
-        }
-      })
+      if (data==='model.wordAddress'){
+        this.showsearchResult = true;
+        that.placeSearchComponent.search(that.model.wordAddress, function (status, result) {
+          if(status==='complete' && result.info === "OK"){
+            that.showsearchResult = true
+            that.showsearchResultBusinessAddress = false;
+            that.poiList = result.poiList.pois
+          }else{
+            that.showsearchResult = false
+            that.showsearchResultBusinessAddress = false;
+            that.poiList = []
+            //that.$message.warning("没有查到结果");
+          }
+        })
+      }
+      if (data==='model.businessAddress'){
+        this.showsearchResultBusinessAddress = true;
+        that.placeSearchComponent.search(that.model.businessAddress, function (status, result) {
+          if(status==='complete' && result.info === "OK"){
+            that.showsearchResultBusinessAddress = true
+            that.showsearchResult = false
+            that.poiList = result.poiList.pois
+          }else{
+            that.showsearchResultBusinessAddress = false
+            that.showsearchResult = false
+            that.poiList = []
+            //that.$message.warning("没有查到结果");
+          }
+        })
+      }
+
     },
 
     getdiscount(lat1,lng1,lat2,lng2){
@@ -789,24 +824,65 @@ export default {
       return s  // 单位千米
     },
 
+    carGPSIP(data) {
+      var map = new AMap.Map("container", {resizeEnable: true});//初始化地图
+      //信息窗口实例
+      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
+      //遍历生成多个标记点
+      data.forEach((val,key) => {
+        console.log("属性：" + key + ",值："+ data.get(key));
+        console.log("wordAddressname".indexOf("name"));
+        console.log(key.includes("name"));
+        if (!key.includes("name")){
+          var marker = new AMap.Marker({
+            position: data.get(key),//不同标记点的经纬度
+            map: map
+          });
+          marker.content = data.get(key+'name') ;
+          marker.on('click', markerClick);
+          marker.emit('click', {target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体
+        }
+      })
 
+      function markerClick(e) {
+        infoWindow.setContent(e.target.content);
+        infoWindow.open(map, e.target.getPosition());
+      }
+      map.setFitView();
+    },
     //选择搜索的内容
-    markerResult(data){
+    markerResult(data,nameType){
+      this.lnglatMaps ;
       console.log(data)
       this.showsearchResult = false;
-      this.mapAddress = data.name;
+      this.showsearchResultBusinessAddress = false;
+      //this.model.wordAddress = data.name; //地点名称
       var marker = new AMap.Marker({
-        position: [Number(data.location.lng),Number(data.location.lat)],
+        position: [Number(data.location.lng),Number(data.location.lat)],//地点名称 坐标
       });
-      this.map.clearMap()// 清除所有覆盖物（点标志）
-      this.map.add(marker)// 添加点标志
-      this.showInfoWindow(marker);
+      //this.map.clearMap()// 清除所有覆盖物（点标志）
+      //this.map.add(marker)// 添加点标志
+      //this.showInfoWindow(marker);
+      this.lnglatMaps.set(nameType, [Number(data.location.lng),Number(data.location.lat)]);
+      this.lnglatMaps.set(nameType+'name', data.name);
+      if (this.lnglatMaps.size>4){
+        this.lnglats.clear();
+      }
+      this.lnglats.push( [Number(data.location.lng),Number(data.location.lat)]); //添加坐标
+      if (this.model.wordAddress ===null ||   this.model.businessAddress===null){
+          return;
+      }
+
+      // if (this.lnglatMaps.size===4){
+        this.carGPSIP(this.lnglatMaps);//各个点分别显示坐标
+      //}
+
       setTimeout(() => {
         this.map.setCenter(data.location);
         this.map.setZoom(15);
       }, 50)
       let thisPosition = {
-        mapAddress: this.mapAddress,
+        mapAddress: this.model.wordAddress,
         lng: data.location.lng,
         lat: data.location.lat
       };
@@ -848,7 +924,7 @@ export default {
 
     initMap(){
       AMapLoader.load({
-        key:"3f95d73e380b9e4a2767c306a4b59f81", // 申请好的Web端开发者Key，首次调用 load 时必填
+        key:"8e513e3c374bdb2dd0095cd337b02ee6", // 申请好的Web端开发者Key，首次调用 load 时必填
         version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: [
           'AMap.ToolBar',
@@ -1118,7 +1194,7 @@ export default {
         if (this.model.positionInformation===''   ||  this.model.positionInformation===null){
           newDatas.push(h('p', null,  '<位置信息> 不可为空... '))
         }
-        if (this.mapAddress===''||  this.mapAddress===null){
+        if (this.model.wordAddress===''||  this.model.wordAddress===null){
           newDatas.push(h('p', null, '<工作地址> 不可为空... '))
         }
         if (this.model.businessAddress===''|| this.model.businessAddress===null){
@@ -1217,7 +1293,7 @@ export default {
         "cardName":that.model.cardName,
         "cardStartTime":that.model.cardStartTime,
         "endStartTime":that.model.endStartTime,
-        "wordAddress":that.mapAddress,
+        "wordAddress":that.model.wordAddress,
         "businessAddress":that.model.businessAddress,
         "positionInformation":that.model.positionInformation