Map of the micro-channel configuration applet

Recently the company has a small program to do micro-channel version of iterations, to remove the original wepy framework, replaced native, coupled with changes in the new version of the large, almost all of the business logic and need to be rewritten, involving a wide logic level, today first teach you how to use the map components in micro letter inside it ~
results as shown below:

map.png

To save you the cost of learning I will put on the bottom of the source code, direct copy available Oh

wxml part:

<view class="container">
    <map id="aroundMap"
             style="width: 100%;height:100%;"
             markers="{{markers}}"
             scale="{{scale}}"
             latitude="{{latitude}}"
             longitude="{{longitude}}"
             show-location>
    </map>
</view>

wxss part:

Set page height is a hundred percent, otherwise it might not have the height map

page{
    height:100%;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    z-index: 1
}

#aroundMap{
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
}

js part:

Page({
    data: {
        markers: [],
        latitude: '',
        longitude: '',
        scale: 16,
    },
    
    onLoad: function () {
        var that = this;

        wx.showLoading({
            title: "定位中",
            mask: true
        });
        wx.getLocation({
            type: 'gcj02',
            altitude: true,//高精度定位
            //定位成功，更新定位结果
            success: function (res) {
                that.setData({
                    longitude: res.longitude,
                    latitude: res.latitude
                });

            },
            //定位失败回调
            fail: function () {
                wx.showToast({
                    title: "定位失败",
                    icon: "none"
                });
            },

            complete: function () {
                //隐藏定位中信息进度
                wx.hideLoading()
            }

        });
    },
});

how about it? This article has not helped to How about you? If any free point of the little red hearts remember a little oh ~