Merge branch 'master' of http://113.105.137.151:22280/zhoujw/rs-cloud-platform-ui

src/views/webSiteManagement/aboutUs/index.vue

@@ -45,10 +45,26 @@
             </el-autocomplete>
           </el-col>
         </el-form-item>
-        <el-form-item label="" prop="lat">
-          <div id="map-container">
-
-          </div>
+        <el-form-item label="" prop="lat" v-if="showMap">
+          <baidu-map
+            style="height: 345px;width:610px;margin-right: 63px;min-width: 610px;"
+            :zoom="zoom"
+            :dragging="true"
+            :scroll-wheel-zoom="true"
+            @ready="handler"
+            @click="getPoint"
+          >
+            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+            <bm-geolocation
+              style="width: 100px; height: 100px"
+              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
+              :showAddressBar="true"
+              :autoLocation="true"
+            ></bm-geolocation>
+            <bm-marker
+              :position="{ lng: form.lng, lat: form.lat }"
+            ></bm-marker>
+          </baidu-map>
         </el-form-item>
         <el-form-item label="公司简介" prop="intro">
             <el-col :span="20">
@@ -79,6 +95,8 @@ export default {
   },
   data() {
     return {
+      zoom: 15,　 //地图展示级别
+      showMap: false,
       form: {
         id: undefined,
         phone: undefined, // 联系电话
@@ -126,62 +144,44 @@ export default {
   },
   async mounted() {
     await loadBMap('gvQPveN9YrlPSgKUMPK2u2u2BA4yQFRm')
-    this.initMap()     
+    this.getCompanyInfo()
   },
   methods: {
-    initMap() {
-      var that = this;
-      this.map = new BMap.Map("map-container", {enableMapClick:false})  //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
-      var point = new BMap.Point(this.form.lng, this.form.lat);
-      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) //点击后调用逆地址解析函数
-      });
+    /**
+     * 加载地图
+     * */
+    handler ({BMap, map}) {
+      let that = this
+      var point = new BMap.Point(this.form.lng, this.form.lat);//定义一个中心点坐标
+      map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
+      window.map = map;//将map变量存储在全局
+      map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
+      map.enableScrollWheelZoom();//启用地图滚轮放大缩小
+      map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
+      map.enableKeyboard();//启用键盘上下左右键移动地图
+      //向地图中添加缩略图控件
+      var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
+      map.addControl(ctrl_ove);
+      //向地图中添加比例尺控件
+      var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
+      map.addControl(ctrl_sca);
+      window.map.panTo(point) //将地图的中心点更改为选定坐标点
     },
     /**
-     * 逆地址解析函数（根据坐标点获取详细地址）
-     * @param {Object} point   百度地图坐标点，必传
+     * 点击地图取点
+     * @param e
      */
-    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.lat = point.lat
-        that.form.lng = point.lng
-        // that.form.addrPoint = point;  //记录当前坐标点
-      })
+    getPoint(e){    //点击地图获取一些信息，
+      let geocoder= new BMap.Geocoder();  //创建地址解析器的实例
+      geocoder.getLocation(e.point,rs=>{
+        this.form.address = rs.address;  //记录该点的详细地址信息
+        this.form.lat = rs.point.lat;
+        this.form.lng = rs.point.lng;
+        window.map.clearOverlays() //清除地图上所有覆盖物
+        this.mk = new BMap.Marker(rs.point) //根据所选坐标重新创建Marker
+        window.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
+        window.map.panTo(rs.point) //将地图的中心点更改为选定坐标点
+      });
     },
     /**
      * 浏览器定位函数
@@ -191,7 +191,7 @@ export default {
       var geolocation = new BMap.Geolocation();
       geolocation.getCurrentPosition(function(res){
         if(this.getStatus() == BMAP_STATUS_SUCCESS){
-          that.getAddrByPoint(res.point) //当成功时，调用逆地址解析函数
+          that.getPoint(res.point) //当成功时，调用逆地址解析函数
         } else {
           // alert('failed'+this.getStatus()); //失败时，弹出失败状态码
           console.log("失败状态码",this.getStatus())
@@ -215,7 +215,7 @@ export default {
           }
         }
       }
-      var local = new BMap.LocalSearch(this.map, options) //创建LocalSearch构造函数
+      var local = new BMap.LocalSearch(window.map, options) //创建LocalSearch构造函数
       local.search(str) //调用search方法，根据检索词str发起检索
     },
     /**
@@ -224,15 +224,14 @@ export default {
     handleSelect(item) {
       this.form.address = item.address + item.title; //记录详细地址，含建筑物名
       // this.form.addrPoint = item.point; //记录当前选中地址坐标
-      this.form.lat = point.lat
-      this.form.lng = point.lng
-      this.map.clearOverlays() //清除地图上所有覆盖物
+      this.form.lat = item.point.lat
+      this.form.lng = item.point.lng
+      window.map.clearOverlays() //清除地图上所有覆盖物
       this.mk = new BMap.Marker(item.point) //根据所选坐标重新创建Marker
-      this.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
-      this.map.panTo(item.point) //将地图的中心点更改为选定坐标点
+      window.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
+      window.map.panTo(item.point) //将地图的中心点更改为选定坐标点
     },
     onContentChange (val) {
-      console.log(val)
     },
     afterChange () {
 
@@ -252,6 +251,7 @@ export default {
             lat: parseFloat(res.data.lat), // 经纬度
             intro: res.data.intro // 简介
           }
+          this.showMap = true
         } else {
           this.$notify({
             title: "失败",
@@ -260,7 +260,6 @@ export default {
             duration: 2000
           });
         }
-        this.initMap()
       });
     },
     /**