微信小程序地图找店

微信小程序地图找店

容小编感慨一句： 2020年最后一个月，flag都实现了吗？

说明：

• 创建map
• 根据当前的经纬度查询附近的商家并展示在地图上。
• 点击对应的商家跳转到商家详情

参考文章： 根据当前定位查询附近商家

效果图

wxml

• 关于授权失败显示的按钮这里没有展示。可直接看上面参考文章即可。【因个人项目中查看map是二级页面】

<nav-bar page-name="地图找店"></nav-bar>

<view class='mapsWrap' style='margin-top: {{navH}}px'>
    <view class="mapBox">
        <map
             id="myMap"
             style="width: 100%; height: 100%;"
             latitude="{{latitude}}"
             longitude="{{longitude}}"
             markers="{{markers}}"
             controls="{{controls}}"
             scale="14"
             show-compass
             show-location
             show-scale
             bindmarkertap="bindMarkerTap"
             bindcallouttap="bindMarkerTap"
             ></map>
    </view>
	
    <!-- 自定义 移动当前位置按钮 -->
    <cover-view class="moveLocation" bindtap="moveToLocation">
        <cover-image class="icon" src="/page/common/libs/assets/images/icon/map.png" />
    </cover-view>
</view>

js

初始化

var that = '';
Page({

    /**
     * 页面的初始数据
     */
    data: {
        latitude: 0,
        longitude: 0,
        markers: [],
        // controls: [{
        //     id: 1,
        //     iconPath: '/images/location.png',
        //     position: {
        //         left: 0,
        //         top: 300 - 50,
        //         width: 50,
        //         height: 50
        //     },
        //     clickable: true
        // }],
        p: 1,
        page_size: 20,
        dataSourceList: []
    },
	onLoad: function (options) {
        that = this;
    }
}

创建Map对象

• 在onReady生命周期函数中创建map对象

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
onReady: function () {
    // 创建map对象
    this.mapCtx = wx.createMapContext('myMap');
	
    // 检查授权状态
	this.check_Authorization();
},

获取当前经纬度

1. 获取用户当前设置

• 首先检查用户是否授权状态， 只有授权才执行获取当前位置信息

check_Authorization: function() {
    wx.getSetting({
        success: (res) => {
            if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] == true) {
                that.setData({
                    postion: true
                })
                that.getLocation();
            } else {
                that.setData({
                    postion: false
                })
                that.getLocation();
            }
        },
        fail(res) {
           
        }
    })
},

2. 获取当前位置

/**
 * 获取当前位置
 */
getLocation: function() {
    wx.getLocation({
        type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标
        success: function(res) {
            that.setData({
                postion: true,
            })
            
            that.setData({
                lng: res.longitude,
                lat: res.latitude
            })

            // 获取附近商家列表
            that.getnearbyList(false);
        },
        fail: function(e) {
            that.setData({
                hideAuthBtn: false
            })
        }
    });
},

获取附近商家列表

• 根据需求， 仅供参考【关于分页具体请查看】

/*
 * 获取附近商家列表
 */
getnearbyList: function (type = true) {
    var params = 'p=' + that.data.p + '&page_size=' + that.data.page_size + '&lng=' + that.data.lng + '&lat=' + that.data.lat;

    app.commonPaging(type, that, 'Nearby/nearbySearch?' + params, (res) => {
        that.setData({
            dataSourceList: res.data.list
        })

        // 处理数据.创建marker
        that.handleData();
    });
},

/**
 * 处理数据.创建marker
 */
handleData: function () {
    let tempMarkets = [];
    let datas = this.data.dataSourceList;
    datas.forEach((item, i) => {
        let tempCM = that.createMarker(datas[i]);
        tempMarkets.push(tempCM);
    })
    that.setData({
        markers: tempMarkets
    })
},

创建marker

/**
 * 创建marker对象
 * @param {*} point 当前点击数据源
 */
createMarker(point) {
    let marker = {
        iconPath: "/images/address.png",
        id: point,
        name: point.store_name || '',
        latitude: point.lat,
        longitude: point.lng,
        width: 30,
        height: 30,
        callout: {
            content: point.store_name,
            fontSize: 12,
            borderRadius: 4,
            padding: 6,
            bgColor: '#2975fe',
            borderColor: '#2975fe',
            color: '#ffffff',
            display: 'ALWAYS',
            textAlign: 'center'
        },
        // label: { //标记下表的文本标签
        //     content: "位置标记",
        //     color: "lightgray",
        //     textAlign: "center",
        //     fontSize: 15
        // }
    };
    return marker;
},

跳转对应商家详情

bindMarkerTap: function (e) {
    if(e.markerId.business_time != 2) {
        wx.navigateTo({
            url: '/page/mainPackage/pages/storeList/storeList?bizId=' + e.markerId.business_id,
        })
    } else {
        wx.showToast({
            title: '该门店休息中哟~',
            icon: 'none'
        })
    }
},

移动当前位置

/**
 * 移动位置
 */
moveToLocation: function() {
    this.mapCtx.moveToLocation();
},