。

src/main.js

@@ -61,6 +61,11 @@ export default {
             'van-icon': '/native/vant/icon/index',
             'van-grid-item ': '/native/vant/grid-item/index',
             'van-dialog': '/native/vant/dialog/index'
+        },
+        permission: {
+            'scope.userLocation': {
+                desc: '需要获取你的位置来查询附近景区'
+            }
         }
     }
 };

src/pages/home.vue

@@ -5,7 +5,16 @@
 </config>
 <template>
     <div class="home-root">
-        <map id="map" :style="{ height: mapHeight }">
+        <map
+            id="map"
+            :style="{ height: mapHeight }"
+            :markers="markers"
+            :latitude="center.latitude"
+            :longitude="center.longitude"
+            :scale="zoom"
+            @markertap="markerTap"
+            @labeltap="markerTap"
+        >
             <div class="menus">
                 <div class="item">
                     <van-icon name="user-o" />
@@ -16,6 +25,10 @@
                     <div class="label">订单</div>
                 </div>
             </div>
+            <img class="map-picker" src="/native/images/icon_picker.png" />
+            <div class="btn-locate" @click="locate">
+                <van-icon name="aim" />
+            </div>
         </map>
         <div class="content-container">
             <van-notice-bar color="#1989fa" background="#ecf9ff" text="1.下单 2.实名免押 3.归还结费 4.代扣租金">
@@ -52,7 +65,27 @@
             </div>
             <van-button type="primary" block @click="submit">提交订单</van-button>
         </div>
-        <van-dialog id="van-dialog" />
+
+        <van-dialog
+            title="提示"
+            message="是否授权"
+            :show="showGetUserInfoDialog"
+            show-cancel-button
+            confirm-button-open-type="getUserInfo"
+            @close="showGetUserInfoDialog = false"
+            @getuserinfo="getUserInfo"
+        >
+        </van-dialog>
+
+        <van-dialog
+            title="是否授权位置信息"
+            message="需要获取您的地理位置，请打开地理位置权限，否则地图功能将无法使用。"
+            :show="showLocationDialog"
+            show-cancel-button
+            confirm-button-open-type="openSetting"
+            @close="showLocationDialog = false"
+        >
+        </van-dialog>
     </div>
 </template>
 
@@ -63,38 +96,145 @@ export default {
     data() {
         return {
             mapHeight: '500px',
-            mapInfo: {
-                zoom: 15
+            center: {
+                latitude: 32.00335,
+                longitude: 118.73145
             },
+            zoom: 13,
             tab: 0,
             locationStatus: 'loading',
-            failMsg: ''
+            failMsg: '',
+            showGetUserInfoDialog: false,
+            showLocationDialog: false,
+            myLocation: null,
+            scenics: []
         };
     },
     computed: {
-        ...mapState(['safeAreaTop', 'safeAreaBottom'])
+        ...mapState(['safeAreaTop', 'safeAreaBottom']),
+        markers() {
+            let markers = [];
+            if (this.myLocation) {
+                markers.push({
+                    latitude: this.myLocation.latitude,
+                    longitude: this.myLocation.longitude,
+                    id: 'location',
+                    iconPath: '/native/images/icon_location.png',
+                    width: 34,
+                    height: 34,
+                    anchor: {
+                        x: 0.5,
+                        y: 0.5
+                    },
+                    rotate: this.myLocation.rotate
+                });
+            }
+            this.scenics.forEach(i => {
+                markers.push({
+                    id: i.id,
+                    latitude: i.latitude,
+                    longitude: i.longitude,
+                    iconPath: '/native/images/icon_dot.png',
+                    width: 10,
+                    height: 10,
+                    label: {
+                        content: i.name,
+                        color: '#07c160',
+                        borderColor: '#ffffff',
+                        display: 'ALWAYS',
+                        anchorX: 8,
+                        anchorY: -16,
+                        bgColor: '#ffffff',
+                        borderRadius: 10,
+                        padding: 4
+                    }
+                });
+            });
+            console.log(markers);
+            return markers;
+        }
     },
     created() {
         const sysInfo = wx.getSystemInfoSync();
         this.mapHeight = sysInfo.windowHeight - this.safeAreaBottom - 128 - 180 + 'px';
     },
+    onShow() {
+        this.locate();
+        wx.startCompass();
+        wx.onCompassChange(res => {
+            if (this.myLocation) {
+                this.myLocation = {
+                    ...this.myLocation,
+                    rotate: res.direction
+                };
+            }
+        });
+    },
+    onHide() {
+        wx.stopCompass();
+    },
     methods: {
         onTabChange(e) {
             this.tab = e.detail.name;
         },
         submit() {
-            this.$dialog
-                .alert({
-                    title: '标题',
-                    message: '弹窗内容',
-                    confirmButtonOpenType: 'getUserInfo',
-                    getuserinfo: res => {
-                        console.log(res);
-                    }
+            this.showGetUserInfoDialog = true;
+        },
+        getUserInfo(res) {
+            console.log(res);
+            wx.showLoading({
+                title: '加载中',
+                mask: true
+            });
+            this.$http
+                .post('/user/getMaUserInfo', {
+                    ...res.detail,
+                    sessionKey: this.$store.state.sessionKey
                 })
                 .then(res => {
-                    console.log(res);
+                    wx.hideLoading();
+                })
+                .catch(e => {
+                    wx.hideLoading();
+                    wx.showToast({
+                        title: e.error || '失败',
+                        icon: 'none'
+                    });
                 });
+        },
+        locate() {
+            console.log('locate');
+            wx.getLocation({
+                success: res => {
+                    this.center = {
+                        latitude: res.latitude,
+                        longitude: res.longitude
+                    };
+                    this.myLocation = {
+                        latitude: res.latitude,
+                        longitude: res.longitude,
+                        rotate: 0
+                    };
+                    this.getScenics(res.latitude, res.longitude);
+                },
+                fail: e => {
+                    console.log(e);
+                    if (/auth deny/.test(e.errMsg)) {
+                        this.showLocationDialog = true;
+                    }
+                }
+            });
+        },
+        getScenics(latitude, longitude) {
+            this.$http.get('/scenic/nearby', { latitude, longitude }).then(res => {
+                this.scenics = res;
+            });
+        },
+        markerTap(e) {
+            wx.showToast({
+                icon: 'none',
+                title: e.detail.markerId + ''
+            });
         }
     }
 };
@@ -115,22 +255,45 @@ export default {
     background: white;
     .flex();
     .item {
-        width: 50px;
-        height: 50px;
+        width: 48px;
+        height: 48px;
         .flex-col();
         align-items: center;
         justify-content: center;
-        font-size: 12px;
+        font-size: 10px;
         ._van-icon {
             font-size: 24px;
             color: @prim;
         }
         .label {
             color: @text2;
-            margin-top: 2px;
         }
     }
 }
+.map-picker {
+    width: 34px;
+    height: 34px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 34px;
+    margin: auto;
+}
+.btn-locate {
+    color: @text2;
+    font-size: 18px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 15px;
+    bottom: 15px;
+    background: white;
+    border-radius: 4px;
+}
 .content-container {
     background: white;
     .flex-col();