地图选点

src/components/AiTMap.vue

@@ -61,9 +61,9 @@ export default {
           center: new TMap.LatLng(latLng.lat, latLng.lng),
           ...this.ops
         })
-        this.$emit('loaded')
         this.$emit('update:lib', TMap)
         this.$emit('update:map', this.tmap)
+        this.$emit('loaded')
         this.areaId && this.getMapArea()
       } else {  //上架版
         uni.getLocation({
@@ -80,9 +80,9 @@ export default {
                 center: new TMap.LatLng(latLng.lat, latLng.lng),
                 ...this.ops
               })
-              this.$emit('loaded')
               this.$emit('update:lib', TMap)
               this.$emit('update:map', this.tmap)
+              this.$emit('loaded')
               this.areaId && this.getMapArea()
             }
           }

src/manifest.json

@@ -41,6 +41,15 @@
           "pathRewrite": {
             "^/online": "/"
           }
+        },
+        "/tmap": {
+          "target": "https://apis.map.qq.com",
+          "changeOrigin": true,
+          "secure": false,
+          "ws": true,
+          "pathRewrite": {
+            "^/tmap": ""
+          }
         }
       }
     },

src/saas/AppCountryAlbum/ChooseAddess.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="Attendance-address">
-    <map @tap="onClick"></map>
+    <AiTMap
+      :map.sync="map"
+      :lib.sync="lib"
+      :ops="ops"
+      :libraries="['service', 'tools']">
+    </AiTMap>
     <u-popup v-model="isShow" :closeable="false" border-radius="32" height="70%" mode="bottom">
 			<div class="wrapper">
         <div class="top">
@@ -10,14 +15,14 @@
         <div class="address-search">
           <div class="address-search__wrapper">
             <image src="./images/search.png" />
-            <input placeholder-style="color: #98A6B6" placeholder="搜索地点" v-model="address">
+            <input placeholder-style="color: #98A6B6" placeholder="搜索地点" v-model="address" @input="onChange">
           </div>
         </div>
-        <scroll-view scroll-y>
+        <scroll-view scroll-y scroll-into-view="address-item1">
-          <div class="address-item" v-for="(item, index) in 20" :key="index">
+          <div class="address-item" :id="'address-item' + index" v-for="(item, index) in addressList" :key="index" @click="chooseAddress(index)">
             <div class="left">
-              <h2>苗栗路-地铁站</h2>
+              <h2>{{ item.title }}</h2>
-              <p>50m内 | 江汉区轨道交通6号线</p>
+              <p>{{ item._distance >= 0 ? item._distance + 'm内' : '未知' }} | {{ item.address }}</p>
             </div>
             <div class="right" :class="[currIndex === index ? 'active' : '']"></div>
           </div>
@@ -25,7 +30,7 @@
         <div class="address-btn">
           <span>打卡有效范围</span>
           <div class="right" @click="isShowScope = true">
-            <i>200米</i>
+            <i>{{ distance[chooseIndex] }}</i>
             <image src="./images/w-right.png" />
           </div>
         </div>
@@ -34,11 +39,13 @@
     <u-popup v-model="isShowScope" :closeable="false" :z-index="11111" border-radius="16" mode="bottom">
 			<div class="ActionSheet">
         <div class="ActionSheet-list">
-          <div :class="[chooseIndex === 0 ? 'active' : '']">100米</div>
+          <div
-          <div :class="[chooseIndex === 1 ? 'active' : '']">200米</div>
+            @click="chooseDistance(index)"
-          <div :class="[chooseIndex === 2 ? 'active' : '']">300米</div>
+            v-for="(item, index) in distance"
-          <div :class="[chooseIndex === 3 ? 'active' : '']">400米</div>
+            :key="index"
-          <div :class="[chooseIndex === 4 ? 'active' : '']">500米</div>
+            :class="[chooseIndex === index ? 'active' : '']">
+            {{ item }}
+          </div>
         </div>
         <div class="cancel-btn" @click="isShowScope = false">取消</div>
       </div>
@@ -47,6 +54,8 @@
 </template>
 
 <script>
+  import { mapState } from 'vuex'
+
   export default {
     name: 'ChooseAddess',
 
@@ -59,16 +68,37 @@
         isShow: false,
         address: '',
         currIndex: 0,
-        chooseIndex: 1,
+        chooseIndex: 0,
-        isShowScope: false
+        isShowScope: false,
+        map: null,
+        ops: {},
+        lib: null,
+        map: null,
+        latLng: null,
+        distance: ['100米', '200米', '300米', '400米', '500米'],
+        addressList: [],
+        page: 1,
+        marker: null,
+        timeout: null
       }
     },
 
+    watch: {
+      map (v) {
+        if (v) {
+          this.init()
+        }
+      }
+    },
+
+    computed: {
+      ...mapState(['user',])
+    },
+
     onLoad () {
       uni.getLocation({
         type: 'wgs84',
         success: res => {
-          console.log(res)
           this.longitude = res.longitude
           this.latitude = res.latitude
         }
@@ -76,9 +106,97 @@
     },
 
     methods: {
-      onClick (e) {
+      chooseDistance (index) {
-        console.log(e)
+        this.chooseIndex = index
+        this.isShowScope = false
+      },
+
+      init () {
+        this.map.setZoom(19)
+        this.addMarker(this.map.getCenter())
+        this.map.on('click', e => {
+          this.addressList = []
+          this.latLng = e.latLng
           this.isShow = true
+
+          this.addMarker(e.latLng)
+          this.getAddress()
+        })
+      },
+
+      chooseAddress (index) {
+        this.addMarker(this.addressList[index].location)
+        this.currIndex = index
+      },
+
+      addMarker (position) {          
+        if (this.marker) {
+          this.marker.setMap(null)
+          this.marker = null
+        }
+        this.marker = new this.lib.MultiMarker({
+          id: 'marker-layer',
+          map: this.map,
+          styles: {
+            marker: new this.lib.MarkerStyle({
+              width: 30,
+              height: 45,
+              anchor: { x: 10, y: 30 }
+            }),
+          },
+          geometries: [{
+            id: 'marker',
+            styleId: 'marker',
+            position: position,
+            properties: {
+              title: 'marker'
+            }
+          }]
+        })
+        this.easeTo(position)
+      },
+
+      easeTo (position) {
+        this.map.easeTo({
+          center: position,
+          zoom: 17
+        },
+        { duration: 500 })
+      },
+
+      onChange () {
+        if (this.timeout) {
+          clearTimeout(this.timeout)
+        }
+        this.timeout = setTimeout(() => {
+          this.currIndex = -1
+          new this.lib.service.Suggestion({
+            pageSize: 20
+          }).getSuggestions({
+            keyword: this.address
+          }).then(res => {
+            this.addressList = []
+            if (res.data.length) {
+              this.addressList = res.data
+            }
+          })
+        }, 500)
+      }, 
+
+      getAddress () {
+        this.currIndex = 0
+        new this.lib.service.Search({
+          pageSize: 20
+        }).explore({
+          center: this.latLng,
+          radius: 2000,
+          orderBy: '_distance'
+        }).then(res => {
+          this.addressList = []
+          if (res.data.length) {
+            this.addressList = res.data
+          }
+        })
       }
     }
   }
@@ -109,6 +227,10 @@
             font-weight: 600;
           }
 
+          &:active {
+            background: #eee;
+          }
+
           &:last-child {
             border: none;
           }
@@ -123,6 +245,10 @@
         text-align: center;
         font-weight: 600;
         background: #fff;
+
+        &:active {
+          background: #eee;
+        }
       }
     }
 
@@ -151,7 +277,13 @@
             border: none;
           }
 
+          .left {
+            flex: 1;
+            margin-right: 20px;
+          }
+
           .right {
+            flex-shrink: 1;
             width: 32px;
             height: 32px;
             border-radius: 50%;
@@ -171,6 +303,7 @@
           }
 
           p {
+            line-height: 1.2;
             color: #999999;
             font-size: 28px;
           }

vue.config.js

@@ -1,3 +1,7 @@
 module.exports = {
-  transpileDependencies: ['uview-ui']
+  transpileDependencies: ['uview-ui'],
+  devServer: {
+    proxy: {
+    }
+  }
 }