1

src/components/busManagement/CharteringManagement/components/Map.vue

 <template>
   <div>
     <div style="text-align: center;display: flex;justify-content: center;">
-      <el-input class="w300" style="margin-right: 10px;" id="suggestId" v-model="city" 
-      placeholder="请输入需要检索的地名" name="address_detail" @input="search"/>
+      <el-input class="w300" style="margin-right: 10px;" id="suggestId" v-model="city" placeholder="请输入需要检索的地名"
+        name="address_detail" @input="search" />
       <!-- <input type="button" class="normalBtn sureBtn" value="搜索" @click="search"/> -->
     </div>
     <div style="height: 310px;width: 100%;margin-top: 15px;" :id="`allmap_${id}${type}_${index}`"></div>
-    <div style="margin-top: 10px;" v-if="address_detail">已选地址：{{address_detail}}</div>
+    <div style="margin-top: 10px;" v-if="address_detail">已选地址：{{ address_detail }}</div>
     <div class="btnList">
-        <input type="button" class="normalBtn sureBtn" value="确定" @click="sendMsg"/>
-        <input type="button" class="hollowFixedBtn" value="取消" @click="closeDialog"/>
+      <input type="button" class="normalBtn sureBtn" value="确定" @click="sendMsg" />
+      <input type="button" class="hollowFixedBtn" value="取消" @click="closeDialog" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["Address","id","type","index"],
-  data(){
-    return{
+  props: ["Address", "id", "type", "index"],
+  data() {
+    return {
       city: '',
       address_detail: null, //详细地址
       userlocation: null,
       dataList: null,
       point: {
-        lng:'',
+        lng: '',
         lat: ''
       },
     }
   },
   watch: {
     Address: {
-        handler(newValue) {
-          this.city = this.Address
-          if(!newValue){
-            this.getcity()
-          }else{
-            this.search()
-          }
-        },
-       immediate: true
+      handler(newValue) {
+        this.city = this.Address
+        if (!newValue) {
+          this.getcity()
+        } else {
+          this.search()
+        }
+      },
+      immediate: true
     },
   },
   mounted() {
     this.city = this.Address
     this.getcity()
   },
-  methods:{
+  methods: {
     closeDialog() {
       this.$emit("refList");
     },
     sendMsg() {
-        if (!this.point.lng) {
-          this.Error("请点击地图上你需要选择的地址");
-        } else {
-          this.$emit("headCallBack", this.point,this.type,this.index,this.address_detail);
-          this.$emit("refList");
-        }
-      },
-    search(){
+      if (!this.point.lng) {
+        this.Error("请点击地图上你需要选择的地址");
+      } else {
+        this.$emit("headCallBack", this.point, this.type, this.index, this.address_detail);
+        this.$emit("refList");
+      }
+    },
+    search() {
       var that = this
       var map = new BMap.Map(`allmap_${that.id}${that.type}_${that.index}`)
       var local = new BMap.LocalSearch(map, { // 智能搜索
-        onSearchComplete: function (){
-          if(local.getResults()&&local.getResults().getPoi(0)&&local.getResults().getPoi(0).point){
+        onSearchComplete: function () {
+          if (local.getResults() && local.getResults().getPoi(0) && local.getResults().getPoi(0).point) {
             that.userlocation = local.getResults().getPoi(0).point // 获取第一个智能搜索的结果
             that.point.lat = that.userlocation.lat
             that.point.lng = that.userlocation.lng
-            map.centerAndZoom(that.userlocation, 15)
+            // map.centerAndZoom(that.userlocation, 15)
             map.addOverlay(new BMap.Marker(that.userlocation)) // 添加标注
           }
         }
       })
       local.search(that.city)
-      map.addEventListener('click', function(e,target) {
-          // var point = new BMap.Point(e.point.lng, e.point.lat) // 创建点坐标，汉得公司的经纬度坐标
-          // map.centerAndZoom(point, 11)
-          // that.point = e.point
-      })
+      // map.addEventListener('click', function (e, target) {
+      //   // var point = new BMap.Point(e.point.lng, e.point.lat) // 创建点坐标，汉得公司的经纬度坐标
+      //   // map.centerAndZoom(point, 11)
+      //   // that.point = e.point
+      // })
       var gc = new BMap.Geocoder();
-      map.addEventListener('mousedown', function(type) {
+      map.addEventListener('mousedown', function (type) {
         var pt = type.point;
-          gc.getLocation(pt, function(rs){
-            var addComp = rs.addressComponents;
-            that.address_detail = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
-          })
+        gc.getLocation(pt, function (rs) {
+          var addComp = rs.addressComponents;
+          that.address_detail = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
+        })
       })
     },
-    getcity(){
-      this.$nextTick(function() {
+    getcity() {
+      this.$nextTick(function () {
         var that = this
         // 创建Map实例
         var map = new BMap.Map(`allmap_${that.id}${that.type}_${that.index}`)
-        
+
         // 获取当前位置
         var geolocation = new BMap.Geolocation();
-        geolocation.getCurrentPosition(function(r){
-          if(r){
+        geolocation.getCurrentPosition(function (r) {
+          if (r) {
             var mk = new BMap.Marker(r.point);
             map.addOverlay(mk);
             map.panTo(r.point);
             that.address_detail = addComp.province + "" + addComp.city + "" + addComp.district + "" + addComp.street + "" + addComp.streetNumber
             that.point.lng = r.point.lng
             that.point.lat = r.point.lat
-            console.log(that.address_detail,'城市===')
-            console.log('您的位置：'+r.point.lng+','+r.point.lat);
+            console.log(that.address_detail, '城市===')
+            console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
           }
           else {
             console.log('failed');
-          }        
+          }
         });
         // 点击地图
-        map.addEventListener('click', function(e,target) {
-          // var point = new BMap.Point(e.point.lng, e.point.lat) // 创建点坐标，汉得公司的经纬度坐标
-          // map.centerAndZoom(point, 11)
-          // that.point = e.point
-        })
+        // map.addEventListener('click', function (e, target) {
+        //   // console.log('4545')
+        //   // var point = new BMap.Point(e.point.lng, e.point.lat) // 创建点坐标，汉得公司的经纬度坐标
+        //   // map.centerAndZoom(point, 11)
+        //   // that.point = e.point
+        // })
         var gc = new BMap.Geocoder();
-        map.addEventListener('mousedown', function(type) {
-          map.centerAndZoom(type.point, 11)
+        map.addEventListener('mousedown', function (type) {
+          // map.centerAndZoom(type.point, 11)
           that.point = type.point
           var pt = type.point;
-          gc.getLocation(pt, function(rs){
+          gc.getLocation(pt, function (rs) {
             var addComp = rs.addressComponents;
             that.address_detail = addComp.province + "" + addComp.city + "" + addComp.district + "" + addComp.street + "" + addComp.streetNumber
           })
         })
         // 初始化地图,设置中心点坐标，
-        if(that.point.lat){
-          var point = new BMap.Point(that.point.lat, that.point.lng) // 创建点坐标
-          map.centerAndZoom(point, 11)
-        }else{
-          map.centerAndZoom(new BMap.Point(104.073652,30.664369), 11); 
+        if (that.point.lat) {
+          // var point = new BMap.Point(that.point.lat, that.point.lng) // 创建点坐标
+          // map.centerAndZoom(point, 11)
+        } else {
+          // map.centerAndZoom(new BMap.Point(104.073652, 30.664369), 11);
         }
         map.enableScrollWheelZoom()
-        if(that.Address){
+        if (that.Address) {
           that.search()
         }
       })
     },
-}
+  }
 }
 </script>
 
 <style scoped>
-  .btnList {
-      margin: 15px 0 0 auto;
-      text-align: right;
-      margin-bottom: 15px;
-    }
-
+.btnList {
+  margin: 15px 0 0 auto;
+  text-align: right;
+  margin-bottom: 15px;
+}
 </style>
\ No newline at end of file