【uniapp】微信小程序简单使用地图组件

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

业务背景

在之前我们的回收小哥只能通过订单列表与详情来查看每个订单的用户信息与位置信息，无法直观的通过地图来查看所有订单的分布，所以出现了这么一个需求，在小程序中运营人员要通过地图来查看具体每一个订单所在的位置，方便规划路线与上门人员，地图中显示需要上门回收的订单。

思路

查阅uniapp官方文档，可以看到uniapp是有自带的map地图组件，这样就直接使用map组件来进行开发。这里我们通过接口调用服务端订单array，存储订单基本信息和经纬度，然后通过标记点在地图图层进行标记位置来进行展示，并也可以实现点击地图中的点位进行弹窗或者进行订单详情页面。

代码实现

地图展示

<view class="page-body">
        <view class="page-section page-section-gap">
                <map v-if="isShow" style="width: 100%; height: 1400rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"
                        :scale="12" @markertap="mark" @callouttap="out">
                </map>
        </view>
</view>

• markers 地图上门展示标记点，以数组形式存储。

• @markertap 点击标记点时触发事件。

• @callouttap 点击标记点对应的气泡时触发，可以在此事件中进行跳转页面等操作

• scale 缩放级别，相当于在PC端用鼠标滚轮来控制地图的显示大小。

地图点位数据获取

findOrderMap() {
    this.$u.api.postRecoveryOrderMap(this.params)
            .then(res => {
                    this.latitude=res.data[0].latitude
                    this.longitude=res.data[0].longitude
                    let i = 0;
                    this.orderList = res.data
                    this.orderList.forEach(item => {
                            this.covers.push({
                                    id: i++,
                                    latitude: item.latitude,
                                    longitude: item.longitude,
                                    callout: {
                                            content: '订单状态：' + (item.orderState === 1 ? '待接单' : '已接单') + '\n' +
                                                             '预约时间：' + item.recoveryTime + '\n' +
                                                             '回收地址：' + item.locationAddress + item.address  + '\n' +
                                                             (item.orderState === 1 ? '' : '回收员：' + item.recoveryUserName),
                                            display: 'BYCLICK',
                                            color: '#000000',
                                            fondSize: 12,
                                            bgColor: '#f7ac4f',
                                            padding: 10,
                                            borderRadius: 5,
                                    }
                            });
                    })
                    this.isShow = true
                    console.log(this.covers)
            })
            .catch(err => {
                    console.log(err);
            });
},

最后

需要注意的一点是地图组件用于只是用于展示地图，这个跟之前提到的定位API获取坐标是两个不同的方法组件，请勿混淆。