代码更新

src/utils/loadBMap.js

+/*
+ * @Author: your name
+ * @Date: 2020-12-04 14:20:54
+ * @LastEditTime: 2020-12-04 14:21:11
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rs-cloud-platform-ui\src\utils\loadBMap.js
+ */
+/**
+ * 动态加载百度地图api函数
+ * @param {String} ak  百度地图AK，必传
+ */
+export default function loadBMap(ak) {
+    return new Promise(function(resolve, reject) {
+      if (typeof window.BMap !== 'undefined') {
+        resolve(window.BMap)
+        return true
+      }
+      window.onBMapCallback = function() {
+        resolve(window.BMap)
+      }
+      let script = document.createElement('script')
+      script.type = 'text/javascript'
+      script.src =
+        'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
+      script.onerror = reject
+      document.head.appendChild(script)
+    })
+  }
+  
\ No newline at end of file

src/views/webSiteManagement/aboutUs/index.vue

 <!--
  * @Author: your name
  * @Date: 2020-12-01 09:07:41
- * @LastEditTime: 2020-12-04 13:52:59
+ * @LastEditTime: 2020-12-04 15:03:57
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rs-cloud\src\views\webSiteManagement\aboutUs.vue
@@ -25,13 +25,29 @@
           </el-col>
         </el-form-item>
         <el-form-item label="*公司地址">
-          <el-col :span="12">
-              <el-input v-model="form.address" placeholder="请输入公司地址"></el-input>
+          <el-col :span="14">
+              <!-- <el-input v-model="form.address" placeholder="请输入公司地址"></el-input> -->
+              <el-autocomplete style="width:100%;"
+                popper-class="autoAddressClass"
+                v-model="form.address"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="详细地址"
+                @select="handleSelect"
+                clearable>
+              <template slot-scope="{ item }">
+                <i class="el-icon-search fl mgr10"></i>
+                <div style="overflow:hidden;">
+                  <div class="title">{{ item.title }}</div>
+                  <span class="address ellipsis">{{ item.address }}</span>
+                </div>
+              </template>
+            </el-autocomplete>
           </el-col>
         </el-form-item>
         <el-form-item label="">
           <div id="map-container">
-            <baidu-map class="bm-view"></baidu-map>
+            
           </div>
         </el-form-item>
         <el-form-item label="*公司简介">
@@ -50,6 +66,7 @@
 
 <script>
 import KindEditor from "@/components/Kindeditor";
+import loadBMap from '@/utils/loadBMap.js'
 export default {
   name: "AboutUs",
   components: {
@@ -60,15 +77,117 @@ export default {
       form: {
           title: '',
           email: '',
-          address: '',  
+          address: '',
+          addrPoint: '',
           introduce: ''
-      }
+      },
+      map: '', //地图实例
+      mk: '' //Marker实例
     };
   },
-  mounted() {
-
+  async mounted() {
+    await loadBMap('gvQPveN9YrlPSgKUMPK2u2u2BA4yQFRm')
+    this.initMap()
   },
   methods: {
+    initMap() {
+      var that = this;
+      this.map = new BMap.Map("map-container", {enableMapClick:false})  //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
+      var point = new BMap.Point(113.30765,23.12005);
+      this.map.centerAndZoom(point,19)
+
+      /** 设置图像标注并绑定拖拽标注结束后事件 */
+      this.mk = new BMap.Marker(point,{enableDragging:true}) //创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
+      this.map.addOverlay(this.mk) //将覆盖物添加到地图中
+      this.mk.addEventListener('dragend', function(e){
+        that.getAddrByPoint(e.point) //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
+      });
+
+      /** 添加（右上角）平移缩放控件 */
+      var navigationControl = new BMap.NavigationControl({ //创建一个特定样式的地图平移缩放控件
+        anchor: BMAP_ANCHOR_TOP_RIGHT, //靠右上角位置
+        type: BMAP_NAVIGATION_CONTROL_SMALL //SMALL控件类型
+      });
+      this.map.addControl(navigationControl ) //将控件添加到地图
+
+      /** 添加（左下角）定位控件  */
+      var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}) //创建一个地图定位控件
+        geolocationControl.addEventListener("locationSuccess", function(e){ //绑定定位成功后事件
+        that.getAddrByPoint(e.point) //定位成功后调用逆地址解析函数
+      });
+      geolocationControl.addEventListener("locationError",function(e){ //绑定定位失败后事件
+        // alert(e.message);
+        console.log("绑定定位失败后事件",e.message)
+      });
+      this.map.addControl(geolocationControl) //将控件添加到地图
+      /** 浏览器定位 */
+      this.geolocation()
+      /** 绑定点击地图任意点事件 */
+      this.map.addEventListener('click', function(e){ //给地图绑定点击事件
+        that.getAddrByPoint(e.point) //点击后调用逆地址解析函数
+      });
+    },
+    /**
+     * 逆地址解析函数（根据坐标点获取详细地址）
+     * @param {Object} point   百度地图坐标点，必传
+     */
+    getAddrByPoint(point){
+      var that = this;
+      var geco = new BMap.Geocoder();
+      geco.getLocation(point, function(res){
+        console.log(res)  //内容见下图
+        that.mk.setPosition(point) //重新设置标注的地理坐标
+        that.map.panTo(point)  //将地图的中心点更改为给定的点
+        that.form.address = res.address;  //记录该点的详细地址信息
+        that.form.addrPoint = point;  //记录当前坐标点
+      })
+    },
+    /**
+     * 浏览器定位函数
+     */
+    geolocation() {
+      var that = this;
+      var geolocation = new BMap.Geolocation();
+      geolocation.getCurrentPosition(function(res){
+        if(this.getStatus() == BMAP_STATUS_SUCCESS){
+          that.getAddrByPoint(res.point) //当成功时，调用逆地址解析函数
+        } else {
+          // alert('failed'+this.getStatus()); //失败时，弹出失败状态码
+          console.log("失败状态码",this.getStatus())
+        }        
+      },{enableHighAccuracy: true}) //enableHighAccuracy：是否要求浏览器获取最佳效果，默认为false
+    },
+    /**
+     * 异步检索搜索的地址
+     */
+    querySearchAsync(str,cb){
+      var options = {
+        onSearchComplete: function(res){ //检索完成后的回调函数
+          var s = [];
+          if (local.getStatus() == BMAP_STATUS_SUCCESS){
+            for (var i = 0; i < res.getCurrentNumPois(); i ++){
+              s.push(res.getPoi(i));
+            }
+            cb(s) //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
+          } else{
+            cb(s)
+          }
+        }
+      }
+      var local = new BMap.LocalSearch(this.map, options) //创建LocalSearch构造函数
+      local.search(str) //调用search方法，根据检索词str发起检索
+    },
+    /**
+     * 选中地址
+     */
+    handleSelect(item) {
+      this.form.address = item.address + item.title; //记录详细地址，含建筑物名
+      this.form.addrPoint = item.point; //记录当前选中地址坐标
+      this.map.clearOverlays() //清除地图上所有覆盖物
+      this.mk = new BMap.Marker(item.point) //根据所选坐标重新创建Marker
+      this.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
+      this.map.panTo(item.point) //将地图的中心点更改为选定坐标点
+    },
     onContentChange (val) {
       console.log(val)
     },
@@ -113,8 +232,24 @@ export default {
     height: calc(99% - 68px);
   }
   #map-container{
-    width: 500px;
+    width: 45%;
     height: 250px;
   }
 }
+.autoAddressClass{
+      li {
+        i.el-icon-search {margin-top:11px;}
+        .mgr10 {margin-right: 10px;}
+        .title {
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        .address {
+          line-height: 1;
+          font-size: 12px;
+          color: #b4b4b4;
+          margin-bottom: 5px;
+        }
+      }
+    }
 </style>
\ No newline at end of file

src/views/webSiteManagement/industryApplication/applicationList/addApp/index.vue

 <!--
  * @Author: your name
  * @Date: 2020-12-04 09:09:37
- * @LastEditTime: 2020-12-04 13:55:15
+ * @LastEditTime: 2020-12-04 13:59:25
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\addApp\index.vue
@@ -127,7 +127,7 @@ export default {
         isSample: '是',
         isCustomized: '是',
         fileList: [],
-        editorText: '直接初始化值', // 双向同步的变量
+        editorText: '', // 双向同步的变量
       }
     }
   },