暂存

src/views/operate/shop/mapModal.vue

@@ -0,0 +1,164 @@
+<template>
+    <el-dialog :visible="_visible" title="选择地址" @close="_visible = false">
+        <div id="r-result">
+        <p>请输入:</p>
+        <input ref="input" size="mini" type="text" id="suggestId" :value="value"/>
+      </div>
+        <div id="l-map" ref="map" />
+        <div 
+        id="searchResultPanel" 
+        style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;" 
+      />
+  
+      <div class="flex-end" style="margin-top:10px">
+        <el-button type="primary" size="mini" @click="save">保存</el-button>
+      </div>
+    </el-dialog>
+  </template>
+  
+  <script>
+  export default {
+    name:'MapModal',
+    props:['visible', 'toponym'],
+    data(){
+      return {
+        isInit: true,
+        value: "",
+        point: []
+      }
+    },
+    computed:{
+      _visible:{
+        get(){
+          return this.visible
+        },
+        set(newVal){
+          this.$emit('update:visible',newVal)
+        }
+      }
+    },
+    watch:{
+      visible(newVal){
+        if(!newVal) return
+        this.$nextTick(() => {
+          if(this.isInit){
+            this.initMap()
+            this.isInit = false
+            return
+          }
+  
+          this.initValue()
+        })  
+      }
+    },
+    methods:{
+      initMap(){
+        this.createMap()
+        this.createAutoComplete()
+        this.registerHightlightEvent()
+        this.registerConfirmEvent()
+        this.registerConfirmEvent()
+      },
+      createMap(){
+        this.map = new BMap.Map('l-map')
+        this.map.centerAndZoom('北京',28)
+      },
+      createAutoComplete(){
+        this.ac = new BMap.Autocomplete({
+          input:'suggestId',
+          localtion: this.map
+        })
+      },
+      registerHightlightEvent(){
+        this.ac.addEventListener('onhighlight',(e) => {
+           var str = "";
+               var _value = e.fromitem.value;
+               var value = "";
+               if (e.fromitem.index > -1) {
+                   value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
+               }    
+               str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
+       
+               value = "";
+               if (e.toitem.index > -1) {
+                   _value = e.toitem.value;
+                   value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
+               }    
+               str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
+               document.getElementById("searchResultPanel").innerHTML = str;
+        })
+      },
+      registerConfirmEvent(){
+        this.ac.addEventListener("onconfirm", (e) => {   //鼠标点击下拉列表后的事件
+          var _value = e.item.value;
+              this.value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
+              document.getElementById("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + this.value;
+              this.setPlace();
+          });
+      },
+      setPlace(){
+          this.map.clearOverlays();    //清除地图上所有覆盖物
+          
+        const onSearchComplete = () => {
+          const { point} = local.getResults().getPoi(0)
+  
+          this.point = [point.lat , point.lng]
+          // const pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
+          
+              this.map.centerAndZoom(point, 18);
+              this.map.addOverlay(new BMap.Marker(point));    //添加标注
+          }
+  
+          var local = new BMap.LocalSearch(this.map, { //智能搜索
+            onSearchComplete
+          });
+  
+          local.search(this.value);
+      },
+      initValue(){
+        if(this.toponym) return
+        this.value = this.toponym
+        this.setPlace()
+      },
+      save(){
+        console.log(this.point,this.value)
+        if(this.point.length !== 2 || !this.value){
+          this.$message.warning('请选择地址')
+          return
+        }
+  
+        this.$emit('save',{ point:this.point, name:this.value })
+        this._visible = false
+      }
+    }
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  #l-map{
+    width: 100%;
+    height: 300px;
+  }
+  
+  #r-result{
+    width: 100%;
+    height: 34px;
+    margin-bottom: 20px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+  
+    p{
+      width:60px;
+    }
+  
+    input {
+      border:1px solid #DCDFE6;
+      width: 100%;
+      height: 100%;
+      border-radius: 5px;
+      box-sizing: border-box;
+      padding: 5px;
+    }
+  }
+  </style>