第7章莫凡商城的获取收货地址功能设计

第 7 / 9 卷作者：刘刚、高伟南、李华威日期：2026-05-29

第7章莫凡商城的获取收货地址功能设计

某用户在微信小程序上浏览各类商品时看中了一件衣服，希望能准确填写收货地址，以确保顺利收到商品。微信小程序提供了电商收货地

址和地图相关API，点击收货地址栏，系统将自动定位用户的当前位置，并显示附近的地图。这样，用户可以轻松选择已有的收货地址，

或者使用地图工具手动标记新的地址，准确地填写收货地址信息，享受安心购物。微信小程序的电商收货地址功能和地图相关API为用户提

供了便捷的购物体验。

获取收货地址是购物App和小程序经常会用到的一个功能，莫凡商城也需要从用户那里获取收货地址。获取收货地址会应用到位置API、收货

地址API和地图组件及地图API。本章将综合应用这些知识来完成莫凡商城获取收货地址功能的设计。

7.1位置API

微信小程序的位置API包括获得当前位置API、选择位置API、打开位置 API、开启/停止接收位置信息API、监听实时地理位置API，运用这些

API可以完成和位置相关的设计。

7.1.1 获得当前位置API、选择位置API、打开位置

API

微信小程序提供了wx.getLocation()、wx.chooseLocation()、 wx.openLocation()3个API。

1．wx.getLocation()

使用wx.getLocation()可以获得当前位置信息，包括当前位置的地理坐标、设备移动速度，用户退出小程序后，此接口无法调用。

接口需要传递位置类型type。Type的默认值为wgs84，返回GPS坐标，值为gcj02时返回可用于wx.openLocation()的坐标。

接口调用成功后，返回参数说明如表7.1所示。

表7.1 wx.getLocation()返回参数说明参数说明latitude纬度，浮点数，范围为−90〜90，负

数表示南纬longitude经度，浮点数，范围为−180〜180，负数表示西经speed速度，浮点数，单位为m/saccuracy

位置的精确度altitude高度，单位为mverticalAccuracy垂直精度，单位为m（Android系统无法获取，返回0）

horizontalAccuracy水平精度，单位为m

示例代码如下：

Page({

onLoad:function(){

wx.getLocation({

type: 'wgs84',

success: function(res) {

var latitude = res.latitude;

console.log("纬度="+latitude);

var longitude = res.longitude;

console.log("经度="+longitude);

var speed = res.speed;

console.log("速度="+speed);

var accuracy = res.accuracy;

console.log("精确度="+accuracy);

}

})

}

})

2．wx.chooseLocation()

使用wx.chooseLocation()可以打开地图来选择位置，调用前需要用户授权scope.user Location，接口调用成功后，返回参数说明如表7.2所

示。

表7.2 wx.chooseLocation()返回参数说明参数说明latitude纬度，浮点数，范围为−90〜

90，负数表示南纬longitude经度，浮点数，范围为−180〜180，负数表示西经name位置名称address详细地址

示例代码如下：

Page({

onLoad:function(){

wx.chooseLocation({

success: function(res){

console.log(res);

}

})

}

})

3．wx.openLocation()

使用wx.openLocation()可以打开微信内置地图查看位置，其返回参数说明如表7.3所示。

表7.3 wx.openLocation()返回参数说明参数类型是否必填说明latitudefloat是纬度，范围为

−90〜90，负数表示南纬longitudefloat是经度，范围为−180〜180，负数表示西经scaleint否缩放比例，范围为5

〜18，默认值为18namestring否位置名称addressstring否地址的详细说明successfunction是接口调用成功的回调

函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会

执行）

示例代码如下：

Page({

onLoad:function(){

wx.getLocation({

type: 'gcj02', //返回可以用于wx.openLocation()的经纬度

success: function(res) {

var latitude = res.latitude

var longitude = res.longitude

wx.openLocation({

latitude: latitude,

longitude: longitude,

scale: 28

})

}

})

}

})

7.1.2 开启/停止接收位置信息API

微信小程序提供wx.startLocationUpdate()来开启小程序进入前台时接收位置信息，调用前需要用户授权scope.userLocation。

微信小程序提供wx.startLocationUpdateBackground()来开启小程序进入前、后台时均接收位置信息，调用前需要用户授权

scope.userLocationBackground，用户授权后，小程序在运行或进入后台时均可接收位置变化信息。

微信小程序提供wx.stopLocationUpdate()来关闭对实时位置变化的监听，调用后前、后台都将停止接收信息。

7.1.3 监听实时地理位置API

使用wx.onLocationChange()可以监听实时地理位置变化事件，需要结合wx.startLocation UpdateBackground()、wx.startLocationUpdate()使

用。wx.onLocationChange()返回参数说明如表7.4所示。

表7.4 wx.onLocationChange()返回参数说明参数说明latitude纬度，浮点数，范围为

−90〜90，负数表示南纬longitude经度，浮点数，范围为−180〜180，负数表示西经speed速度，单位为

m/saccuracy位置的精确度altitude高度，单位为mverticalAccuracy垂直精度，单位为m（Android系统无法获取，

返回0）horizontalAccuracy水平精度，单位为m

示例代码如下：

const _locationChangeFn = function(res) {

console.log('location change', res)

}

wx.onLocationChange(_locationChangeFn)

wx.offLocationChange(_locationChangeFn)

微信小程序使用wx.offLocationChange()来取消监听实时地理位置变化事件。

7.2收货地址API

微信小程序提供了收货地址API来获取用户的收货地址，可调出用户编辑收货地址的原生界面，并在用户编辑完成后返回用户选择的地址，

调用前需要用户授权scope.address。收货地址API调用成功后的返回值的属性如表7.5所示。

表7.5 收货地址API调用成功后的返回值的属性属性类型说明userNamestring收货人姓

名postalCodestring邮编provinceNamestring国标收货地址第一级地址cityNamestring国标收货地址第二级地址

countyNamestring国标收货地址第三级地址detailInfostring详细收货地址信息nationalCodestring收货地址国家

（地区）码telnumberstring收货人手机号码errMsgstring错误信息

示例代码如下：

Page({

onLoad: function() {

wx.chooseAddress({

success(res) {

console.log(res.userName)

console.log(res.postalCode)

console.log(res.provinceName)

console.log(res.cityName)

console.log(res.countyName)

console.log(res.detailInfo)

console.log(res.nationalCode)

console.log(res.telnumber)

}

})

}

})

7.3地图组件及地图API

在微信小程序开发中，基于地理位置的功能已成为提升用户体验的重要功能。微信小程序通过map组件和地图API，为开发者提供了便捷的

地理信息展示与交互能力，可广泛应用于出行导航、本地服务、物流追踪等场景。

7.3.1 地图组件map

微信小程序提供了地图功能，可通过map组件来开发与地图有关的应用，如共享单车、滴滴打车、外卖配送查询等，在地图上可以标记覆

盖物并指定一系列的坐标，如共享单车应用的地图上会标识共享单车的位置。

map组件的属性如表7.6所示。

表7.6 map组件的属性属性类型默认值说明longitudenumber中心经度latitudenumber中心纬度

scalenumber16缩放级别，取值范围为3〜20min-scalenumber3最小缩放级别max-scalenumber20最大缩放级别

markersarray标记点coversarray即将废弃，请使用markerspolylinearray路线circlesarray圆controlsarray控件

include-pointsarray缩放视野以包含所有给定的坐标点show-locationboolean指定是否显示带有方向的当前定位点

polygonsarray.<polygon>多边形subkeystring个性化地图使用的keylayer-stylenumber1个性化地图配置的style。

不支持动态修改rotatenumber0旋转角度，取值范围为0〜360，地图正北和设备y轴的夹角skewnumber0倾斜角

度，取值范围为0〜40，关于z轴的倾角enable-3Dbooleanfalse指定是否展示3D楼块show-compassbooleanfalse指

定是否显示指南针show-scalebooleanfalse指定是否显示比例尺enable-overlookingbooleanfalse指定是否开启俯视

enable-zoombooleantrue指定是否支持缩放enable-scrollbooleantrue指定是否支持拖动enable-rotatebooleanfalse

指定是否支持旋转enable-satellitebooleanfalse指定是否开启卫星地图enable-trafficbooleanfalse指定是否开启实

时路况enable-poibooleantrue指定是否展示POI（Point of Interest，关注点）enable-buildingboolean指定是否展

示建筑物settingobject配置项bindcallouttapeventhandle点击标记点对应的气泡时触发，e.detail =

{markerId}bindmarkertapeventhandle点击标记点时触发，e.detail = {markerId}bindcontroltapeventhandle点击

控件时触发，e.detail = {controlId}bindregionchangeeventhandle视野发生变化时触发bindtapeventhandle点击

地图时触发bindupdatedeventhandle在地图渲染更新完成时触发bindpoitapeventhandle点击地图POI时触发，

e.detail = {name, longitude, latitude}

markers标记点用于在地图上显示标记的位置，markers标记点的属性如表7.7所示。

表7.7 markers标记点的属性属性说明类型是否必填备注id标记点idnumber否marker点击事件回

调会返回此id。建议为每个marker设置number类型id，保证更新marker时有更好的性能latitude纬度number是浮

点数，范围为-90〜90longitude经度number是浮点数，范围为-180〜180title标注点名称string否点击某地点时显

示。callout存在时将被忽略zIndex显示层级numbericonPath显示的图标string是项目目录下的图片路径。支持相

对路径写法，以“/

”开头则表示小程序的相对根目录。也支持临时路径和网络图片rotate旋转角度number否顺时针旋转的角度，取

值范围为0〜360，默认值为0alpha标注的透明度number否默认值为1，不透明width标注图标的宽度number否默

认为图标实际宽度height标注图标的高度number否默认为图标实际高度callout自定义标记点上方的气泡窗口

objectlabel为标记点增加标签objectanchor经纬度在标记点的锚点。默认在底边中点object{x, y}，x表示横向，取

值范围为(0,1)；y表示纵向，取值范围为(0,1)。{x: 0.5, y: 1}表示底边中点aria-label无障碍访问。（属性）元素的

额外描述string

polyline用来指定一系列坐标点，从数组第一项连线至最后一项，其属性如表7.8所示。

表7.8 polyline坐标点的属性属性说明类型是否必填备注points经纬度数组array是

[{latitude:0,longitude:0}]color线的颜色string否以8位十六进制数表示，后两位表示alpha值，如#000000AAwidth

线的宽度number否dottedLine指定是否为虚线boolean否默认为falsearrowLine指定是否为带箭头的线boolean否默

认为false，微信开发者工具暂不支持该属性arrowIconPath更换箭头图标string否在arrowLine为true时生效

borderColor线的边框颜色string否borderWidth线的厚度number否

注意

地图组件的经纬度必填，如果不填，则默认是北京的经纬度。

示例代码如下：

<map id="map" longitude="113.324520" latitude="23.099994" scale="14"

bindcontroltap= "controltap" markers="{{markers}}"

bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange"

show-location style="width: 100%; height: 300px;"></map>

// map.js

Page({

data: {

markers: [{

id: 0,

latitude: 23.099994,

longitude: 113.324520,

width: 50,

height: 50

}],

polyline: [{

points: [{

longitude: 113.3245211,

latitude: 23.10229

},{

longitude: 113.324520,

latitude: 23.21229

}],

color:"#FF0000DD",

width: 2,

dottedLine: true

}]

regionchange(e) {

console.log(e.type)

markertap(e) {

console.log(e.markerId)

controltap(e) {

console.log(e.controlId)

}

})

地图界面效果如图7.1所示。

图7.1 地图界面效果

7.3.2 地图API

wx.createMapContext()是地图组件控制API，用来创建并返回 MapContext对象，它有以下8种方法。

MapContext.getCenterLocation()：获取当前地图中心的经纬度，返

回的值基于GCJ-02坐标系，可以用于wx.openLocation()。

MapContext.moveToLocation()：将地图中心移动到当前定位点，需

要配合map组件的show-location使用。

MapContext.getRegion()：获取当前地图的视野范围。
MapContext.getRotate()：获取当前地图的旋转角度。
MapContext.getScale()：获取当前地图的缩放级别。
MapContext.getSkew()：获取当前地图的倾斜角度。
MapContext.includePoints()：缩小地图展示所有经纬度。
MapContext.translateMarker()：平移标记点，带动画。

示例代码如下：

// map.js

Page({

onReady: function (e) {

// 使用wx.createMapContext()获取map上下文

this.mapCtx = wx.createMapContext('myMap')

getCenterLocation: function () {

this.mapCtx.getCenterLocation({

success: function(res){

console.log(res.longitude)

console.log(res.latitude)

}

})

moveToLocation: function () {

this.mapCtx.moveToLocation()

}

})

7.4项目实战：使用AI编程工具辅助实现立即购买

页面1

．任务目标

实现立即购买页面，包括选择收货地址设计、商品信息展示、快递说明、商品总价和提交订单区域设计。

2．任务实施

下面来实现莫凡商城小程序的立即购买页面。

（1）在app.json文件里添加立即购买页面路径“pages/buy/buy”。

（2）打开通义灵码，输入以下内容并发送，如图7.2所示。

微信小程序实现立即购买页面，立即购买页面第一个模块显示的是收货人的信息，包括收货人昵称（李华）、联系方式（18011111111）和

收货地址（北京市昌平区101），第二个模块显示商品店铺名称，店铺名称下面以下划线分开显示商品信息，商品信息分为左、右两部分展

示，左边展示商品图片、右边上部分展示商品名称，下部分展示价格和购买的数量，数量不可修改，只展示数字即可，以下画线隔开，继

续展示送货说明部分，送货说明部分分为左、右两部分，左边是“送货说明”标题，右边展示快递名称、送达时间，数据从接口获取，整个页

面底部固定显示总价和“提交订单”按钮。

图7.2 发送需求

3．AI生成

通义灵码根据需求生成了实现立即购买页面的代码，包括WXML布局、 WXSS样式及JS数据绑定，实现了收货信息、商品信息和快递信息展示

以及提交订单功能，如图7.3所示。

图7.3 通义灵码生成立即购买页面

4．优化建议

在运行AI生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下几个方面进行优化。

对需求进行更加详细的说明，例如，给出收货地址的具体布局，让AI

编程工具生成更加符合需求的代码，就不用进行很多修改。

分模块进行生成，例如先完成选择收货地址模块，再完成商品信息展

示和快递说明模块，最后完成底部的总价显示和“提交订单”按钮模块。

把生成的示例接口替换成获取商品数据的真实接口，把真实接口返回

的数据渲染到页面上。

根据自己的实际需求手动调整样式代码，使得页面美观大方。

5．页面展示

代码经过优化后，运行代码，页面样式如图7.4所示。

图7.4 立即购买页面