人工智能研究中心快递柜——代码分析七

最新推荐文章于 2025-12-27 16:51:58 发布

原创最新推荐文章于 2025-12-27 16:51:58 发布 · 700 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #小程序

本文介绍了一种基于微信小程序的地图组件实现柜子定位的方法。利用wx.getLocation获取用户位置信息，并结合自定义请求获取周边柜子的数据，通过markers展示在地图上。同时实现了标记点点击放大效果及导航功能。

2021SC@SDUSC

index.wxml

index.js

本次分析项目中柜子的定位功能的实现。

index.wxml

在微信官方开发文档中，提供了map组件，通过对wx.createMapContext api的使用可以实现一些基础属性的设定，id用于设置控件id,在控件点击事件回调会返回此id；style综合设置了相关尺寸；bindtap用于在点击地图时触发；bindmarkertap用于点击标记点时触发；markers设置地图中的标记点；latitude设置标记点位于地图上显示标记位置的纬度，longtitude用于设置经度；show-location显示带有方向的当前定位点；show-compass，show-scale用于显示指南针和比例尺。

 <map id="myMap" bindtap="bindMapTap" style="width: 95%; margin-left: 2.5%; height: 1150rpx;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location bindmarkertap="markerTap" show-compass show-scale></map>

柜子地图放在container中，用ID，柜子的名称、详细地址、距离都通过view进行可视化实现，在view标签中调用js中定义的属性。

<view style="display: flex; justify-content: space-between;">
      <view>
        <view style="font-size: 40rpx;">{{temp.name}}</view>
        <!-- distance -->
        <view>{{temp.distance}}km</view>
        <view>{{temp.location}}</view><!-- 柜子的详细地址 -->
      </view>
      <image src="/img/icon/map_go_there.png" style="width: 80rpx; height: 80rpx; background-color: #3c69ef; border-radius: 50%;" bindtap="openOtherApp"></image>
    </view>

index.js

在这部分进行获得柜子距离、位置的方法实现。

定义getItems方法用于根据用户定位信息获取周围柜子信息，首先通过wx.getLocation方法获取当前的地理位置、速度。可以重新定义object.res参数的latitude纬度和longitude经度，并将重设的经纬度存在params中，接下来请求用户周围的柜子信息列表。

  wx.getLocation({
            success(res) {
                console.log("location", res, res.latitude, res.longitude);
                that.setData({
                    latitude: res.latitude,
                    longitude: res.longitude,
                })

                let params = {
                    latitude: res.latitude,
                    longitude: res.longitude,
                };
               
                request.request("/wechat/getAroundCabinet", "GET", params, (data) => {
                    console.log("--markers data--", data);
                    data.forEach((item) => {
                        item.width = that.data.size; 
                        item.height = that.data.size;
                        item.distance = Number(item.distance).toFixed(2);
                    })
                    that.setData({
                        markers: data,
                    }, () => {
                      
                        that.includePoints();
                    })
                }, (data) => {
                    console.log("on fail ", data);
                }) 
            }
        })

includePoints是定义的缩放视野展示所有经纬度方法；markertap定义标记的点击事件；resizeMarker用于还原第index个marker，emphasizeMarker用于放大第index个marker，markertap调用这两个方法实现标记事件的定义。

 resizeMarker: function(index) {
        console.log("resize marker", index)

        if(index != null) {
            this.setData({
                [`markers[${index}].width`]: this.data.size,
                [`markers[${index}].height`]: this.data.size,
            })
        }
    },

emphasizeMarker: function(index) {
        let markersWidth = `markers[${index}].width`;
        let markersHeight = `markers[${index}].height`;
        this.setData({
            [markersWidth]: this.data.emphasizeSize,
            [markersHeight]: this.data.emphasizeSize,
        }, () => {
            console.log("emphasize set data", this.data.markers)
        })
    },

 markerTap: function(e) {
        console.log("marker tap", e, e.markerId);
        // 还原上次点击的marker
        this.resizeMarker(this.data.index);
        
        var index = this.data.markers.findIndex((item) => {return item.id == e.markerId});
        
        let marker = this.data.markers[index];
        console.log("marker temp", index, marker);
        this.setData({
            temp: marker,
            index: index,
        })
        console.log("----", typeof index)
        // 放大新点击的 marker
        this.emphasizeMarker(index);
    },

最后是openOtherApp方法，用于调用微信的API打开当前位置，内含使用其他APP导航的功能。

openOtherApp: function() {
        console.log("open other app", this.data.temp)
        wx.openLocation({
          latitude: this.data.temp.latitude,
          longitude: this.data.temp.longitude,
          name: this.data.temp.name,
          address: this.data.temp.location, // 详细地址
        })
    },

至此借用wx api的相关内容实现了柜子位置的展示和导航的功能。