微信小程序之地图的配置

最近公司有一款微信小程序做版本迭代，要去掉原来的wepy框架，换成原生的，加之新版本改动较大，几乎所有的业务和逻辑都要重写，涉及的逻辑层面很广，今天就先教大家如何在微信里面使用地图组件吧~
效果如下图所示：

map.png

为了节省大家的学习成本我会把源码放在下方，直接copy可用哦

wxml部分：

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

wxss部分：

请设置page高度为百分百，否则地图可能会没有高度

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部分:

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()
            }

        });
    },
});

怎么样？这篇文章有没有帮助到你呢？如果有的话免费的小红心记得点一点哦~