微信小程序-wx.chooseLocation简单使用

一、目的

使用微信官方提供的API即可获得位置的经纬度以及地址和name。使用经纬度调店铺列表接口，可获得当前位置的一些店铺列表

二、动手

1、WXML

<view>
    <view class="map_content" bindtap="getMap">
        <view class="title">所在地区</view>
        <view class="content">
            <input disabled class="input" value="{{addressName}}" type="text" placeholder="请选择" maxlength="140" ></input>
            <image class="icon-arrow-right right-icon"> </image>
        </view>
    </view>
    <view class="map_content">经度longitude：{{longitude}}</view>
    <view class="map_content">纬度latitude：{{latitude}}</view>
</view>

2、SCSS

.map_content {
    padding: 0 19rpx;
    width: 100%;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 24rpx;
    border-top: 1rpx solid #cccccc;
    .title {
        flex: 1;
    }
    .content {
        flex: 4;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .input {
            width: 100%;
        }
        .right-icon{
            width:30rpx;
            padding: 15rpx 0 15rpx 30rpx;
            height: 30rpx;
            color: #999999;
        }
    }
}

3、Typescript

data = {
    addressName: '',
    latitude: '',
    longitude: ''
}
// 获得地图内容
getMap() {
    var me = this;
    wx.chooseLocation({
        success: function(res: any) {
            console.log('res-------', res);
            me.setData({
                addressName: res.name || null,
                latitude: res.latitude,
                longitude: res.longitude
            });
        }
    })
}

三、效果

1、微信开发者工具上的效果图

红色框为点击区域 进入地图页面（ wx.chooseLocation 自带的），勾选一地址，点击确定即可 显示被勾选的地址

2、安卓/苹果手机上的效果图

红色框为点击区域 进入地图页面（ wx.chooseLocation 自带的），勾选一地址，点击确定即可 显示被勾选的地址