增加经纬度

index.html

@@ -32,6 +32,7 @@
     </script> -->
     <!-- <script type="text/javascript" src="http://www.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&libraries=geometry&language=zh_CN"></script> -->
     <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OV7BZ-ZT3HP-6W3DE-LKHM3-RSYRV-ULFZV"></script>
+    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc"></script>
     <script src="/static/UE/ueditor.config.js"></script>
     <script src="/static/UE/ueditor.all.js"></script>
     <script src="/static/UE/lang/zh-cn/zh-cn.js"></script>

src/components/WebSet/WebSiteArea.vue

@@ -35,6 +35,17 @@
 .cover {
   height: 30px;
 }
+.justify-between {
+    justify-content: space-between;
+  }
+</style>
+<style lang="css" scoped>
+#map {
+  width: 300px;
+  height: 180px;
+  margin-left: 20px;
+  border-radius: 4px;
+}
 </style>
 <template>
   <!--契约管理-->
@@ -66,7 +77,7 @@
         <li>
           <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
             @click="resetPageIndex(),getData()" />
-          <input type="button" class="normalBtn" @click="outerVisible=true,clearMsg()" value="新增地区" />
+          <input type="button" class="normalBtn" @click="outerVisible=true,clearMsg(),createMap()" value="新增地区" />
         </li>
       </ul>
     </div>
@@ -111,7 +122,7 @@
       </el-pagination>
     </div>
 
-    <el-dialog title="地区设置" :visible.sync="outerVisible" center width="1000px">
+    <el-dialog :close-on-click-modal="false" title="地区设置" :visible.sync="outerVisible" center width="1000px">
       <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
         <el-row>
           <el-col :span="24">
@@ -152,10 +163,14 @@
               <i v-if="showAddArea" class="el-icon-circle-plus addIcon" style="margin-left: 10px" @click="clickArea(0, 1)"></i>
             </el-form-item>
             <el-form-item label="坐标" prop="LngLat">
-              <el-input v-model="addMsg.LngLat" />
+              <div class="flex justify-between">
+                <div>
+              <el-input type="text" v-model="addMsg.LngLat" @change="lngLatChange"/>
               <div>请点击拾取坐标在新页面打开坐标拾取页面，将拾取的坐标复制到文本框内</div>
               <!-- <iframe width="400" height="400" src="https://api.map.baidu.com/lbsapi/getpoint/"></iframe> -->
-              <el-button type="primary" @click="openBaiduMap">拾取坐标</el-button>
+              <el-button type="primary" @click="openBaiduMap">拾取坐标</el-button></div>
+              <div id="map"></div>
+              </div>
             </el-form-item>
             <el-form-item label="介绍" prop="Introduction">
               <el-input type="textarea" :rows="2" v-model="addMsg.Introduction" />
@@ -235,7 +250,6 @@ import uploadImg from '../../pubComponents/uploadImg'
           Level: [
             { required: true, message: '请选择层级', trigger: 'change' }
           ],
-          LngLat: [{ required: true, message: '请输入坐标', trigger: 'blur' }],
           Introduction: [{ required: true, message: '请输入介绍', trigger: 'blur' }],
           TimeZones: [
             { required: true, message: '请输入时区', trigger: 'blur' },
@@ -270,6 +284,7 @@ import uploadImg from '../../pubComponents/uploadImg'
         outerVisible: false,
         dataList: [],
         addMsg: {
+          LngLat: '',
           IsHot: false,
           Id: 0, //编号
           Level: 0, //等级
@@ -289,6 +304,53 @@ import uploadImg from '../../pubComponents/uploadImg'
       this.financeinfo_post_GetList()
     },
     methods: {
+      lngLatChange() {
+        let lngLat = this.addMsg.LngLat.split(',')
+        console.log('addMsg.LngLat watcher', this.addMsg.LngLat, lngLat)
+        if(!lngLat[0] || !lngLat[1]) {
+          this.$message.error('坐标格式不对,请重新输入');
+          return
+        } else {
+          this.createMap(lngLat[0], lngLat[1])
+          
+      let point = new BMapGL.Point(lngLat[0], lngLat[1]); // 创建点坐标
+      this.map.setCenter(point);
+      this.map.clearOverlays();
+          this.addMarker(lngLat[0], lngLat[1])
+        }
+      },
+      createMap(lng = 116.406775, lat = 39.916901) {
+      if (!BMapGL) {
+        return;
+      }
+      let map = new BMapGL.Map("map"); // 创建地图实例
+      this.map = map;
+      let pointA = new BMapGL.Point(lng, lat); // 创建点坐标
+      map.centerAndZoom(pointA, 12); // 初始化地图，设置中心点坐标和地图级别
+      if(this.addMsg.Lng) {
+        let point = new BMapGL.Point(this.addMsg.Lng, this.addMsg.Lat); // 创建点坐标
+      this.map.setCenter(point);
+        this.addMarker(this.addMsg.Lng, this.addMsg.Lat)
+      }
+    },
+    addMarker(lng, lat) {
+      let icon = require(`../../assets/img/marker.png`);
+      var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(27, 32), {
+        // 指定定位位置。
+        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
+        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
+        // 图标中央下端的尖角位置。
+        anchor: new BMapGL.Size(10, 25),
+        // 设置图片偏移。
+        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
+        // 需要指定大图的偏移位置，此做法与css sprites技术类似。
+        // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
+      });
+      let point = new BMapGL.Point(lng,lat); // 创建点坐标
+      // 创建标注对象并添加到地图
+      var marker = new BMapGL.Marker(point, { icon: myIcon });
+      this.map.addOverlay(marker);
+    },
       openBaiduMap() {
         window.open('https://api.map.baidu.com/lbsapi/getpoint/')
       },
@@ -350,7 +412,6 @@ import uploadImg from '../../pubComponents/uploadImg'
             if (res.data.resultCode == 1) {
               this.dataList = res.data.data.pageData;
               this.total = res.data.data.count
-              this.dataList.LngLat = res.data.data.pageData.Lng  ? `${res.data.data.pageData.Lng},${res.data.data.pageData.Lat}` : ''
             } else {
               this.loading = false;
             }
@@ -373,18 +434,24 @@ import uploadImg from '../../pubComponents/uploadImg'
         this.apipost(
           "ws_get_GetArea", {
             Id: item.Id,
+            LeveL: item.Level,
           },
           res => {
             if (res.data.resultCode == 1) {
               var tempData = res.data.data;
               tempData.IsHot = tempData.IsHot === 1
               this.addMsg = tempData;
+              this.$set(this.addMsg, "LngLat", res.data.data.Lng  ? `${res.data.data.Lng},${res.data.data.Lat}` : '')
+              console.log('this.addMsg.LngLat', this.addMsg.LngLat)
               if(!this.addMsg.BestTravelTimeList || !this.addMsg.BestTravelTimeList.length) {
                 this.addMsg.BestTravelTimeList = [{
                   Month: '',
                   Description: ''
                 }]
               }
+              this.$nextTick(() => {
+      this.createMap()
+              })
               this.areaLevelChange()
               this.$refs.uploadImg.ImageList = tempData.ImageList || []
             } else {
@@ -417,6 +484,7 @@ import uploadImg from '../../pubComponents/uploadImg'
       //清空数据
       clearMsg() {
         this.addMsg = {
+          LngLat: '',
           IsHot: false,
           Id: 0, //编号
           Level: 0, //等级
@@ -451,7 +519,7 @@ import uploadImg from '../../pubComponents/uploadImg'
           return
         }
         let lngLat = this.addMsg.LngLat.split(',')
-        if(!lngLat[0] || !lngLat[1]) {
+        if(this.addMsg.Level !== 1 && (!lngLat[0] || !lngLat[1])) {
           this.$message.error('坐标不对,请重新输入');
           return
         }

src/plug/index.js

@@ -119,6 +119,7 @@ export default {
                 let crmUrl = ""; //crm API
                 let locationName = window.location.hostname;
                 domainUrl = "http://192.168.10.128";
+                domainUrl = "http://192.168.10.11:8083" // 刘东电脑
                 // domainUrl = "http://192.168.10.123:8002";
                 // domainUrl = "http://reborn.oytour.com";
                 let crmLocalFileStreamDownLoadUrl = "";