前言
在微信小程序开发中，地图功能（如打车、外卖、导航等）是非常常见的业务场景。微信官方提供了
今天，我们将通过一个实战案例（案例 4.9 map 组件），实现一个包含地图展示、选择位置、打开位置功能的小程序，并在基础要求上完成“在地图上添加 3 个自定义标记点（Markers）”的扩展作业。
一、 核心知识点准备
在开始编码前，我们需要了解本次用到的核心 API 和配置：
wx.getLocation：获取当前的地理位置、速度。
wx.chooseLocation：打开地图选择位置。
wx.openLocation：使用微信内置地图查看位置。
权限配置：自 2022 年起，微信对地理位置接口进行了严格管控，必须在 app.json 中声明 requiredPrivateInfos 和 permission。
二、 项目配置
准备图标
在项目根目录下新建 images 文件夹，放入三个图标图片（如 location.png、marker1.png、marker2.png），用于地图上的标记点。修改 app.json
非常重要：如果不配置这里，调用 wx.getLocation 会直接报错。将以下配置加入你的 app.json 中：
json
{
“pages”: [
“pages/index/index”
],
“window”: {
“navigationBarTitleText”: “map组件”,
“navigationStyle”: “custom”
},
“requiredPrivateInfos”: [
“getLocation”,
“chooseLocation”
],
“permission”: {
“scope.userLocation”: {
“desc”: “你的位置信息将用于小程序位置接口的效果展示”
}
},
“style”: “v2”,
“renderer”: “skyline”,
“componentFramework”: “glass-easel”
}
(注：若要正式发布上线，还需要在微信公众平台后台的“开发管理-接口设置”中申请开通地理位置的接口权限，且小程序类目需符合要求。)
三、 页面布局与样式
- index.wxml
布局非常直观：上方是标题和地图组件，下方是两个操作按钮。
html
地图组件应用示例
<map
id=“myMap”
class=“map”
longitude=“{{longitude}}”
latitude=“{{latitude}}”
scale=“16”
markers=“{{markers}}”
show-location
css
page {
height: 100vh;
display: flex;
flex-direction: column;
}
map {
margin: 20rpx 0;
width: 100%;
height: 700rpx;
}
.btnLayout {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 20rpx;
}
3. app.wxss (全局样式)
css
.box {
margin: 20rpx;
padding: 20rpx;
border: 2rpx solid purple;
}
.title {
font-size: 40rpx;
font-weight: bolder;
text-align: center;
margin-bottom: 30rpx;
color: #ff7d00;
}
四、 逻辑实现（含扩展作业）
- 初始化 3 个标记点（扩展作业）
打开 index.js，我们在 onLoad 中初始化数据。为了完成扩展要求，我们在 markers 数组中配置了 3 个对象，并利用 callout 属性为它们添加了类似 PPT 中的文字气泡。
javascript
Page({
data: {
// 初始经纬度（以黑龙江东方学院附近为例）
latitude: 45.7033,
longitude: 126.6383,
markers: []
},
onLoad() {
// 扩展作业：初始化 3 个标记点
this.setData({
markers: [
{
id: 1,
latitude: 45.7033,
longitude: 126.6383,
iconPath: ‘/images/location.png’,
width: 40,
height: 40,
callout: {
content: ‘我的位置’,
color: ‘#000000’,
fontSize: 14,
borderRadius: 5,
bgColor: ‘#ffffff’,
padding: 5,
display: ‘ALWAYS’, // 常驻显示气泡
textAlign: ‘center’
}
},
{
id: 2,
latitude: 45.7060, // 模拟坐标
longitude: 126.6410,
iconPath: ‘/images/marker1.png’,
width: 35,
height: 35,
callout: {
content: ‘第一学生公寓’,
color: ‘#ffffff’,
fontSize: 14,
borderRadius: 5,
bgColor: ‘#0052d9’, // 蓝色背景
padding: 5,
display: ‘ALWAYS’,
textAlign: ‘center’
}
},
{
id: 3,
latitude: 45.7000, // 模拟坐标
longitude: 126.6360,
iconPath: ‘/images/marker2.png’,
width: 35,
height: 35,
callout: {
content: ‘黑龙江东方学院南门’,
color: ‘#ffffff’,
fontSize: 14,
borderRadius: 5,
bgColor: ‘#ff0055’, // 红色背景
padding: 5,
display: ‘ALWAYS’,
textAlign: ‘center’
}
}
]
});
},
// … 其他方法
})
2. 选择位置 & 打开位置
继续在 index.js 中完善两个按钮的点击事件：
javascript
// 选择位置
chooseLocation() {
wx.chooseLocation({
success: (res) => {
console.log(res);
// 将地图中心点移动到用户选择的位置
this.setData({
longitude: res.longitude,
latitude: res.latitude
});
wx.showToast({ title: '已选择：' + res.name, icon: 'none' }); }, fail: (err) => { console.error("选择位置失败：", err); } });},
// 打开位置
openLocation() {
wx.getLocation({
// 【踩坑提示】PPT 中写的 type: ‘gci02’ 是错的，正确的坐标系是 ‘gcj02’
type: ‘gcj02’,
success: (res) => {
wx.openLocation({
latitude: res.latitude,
longitude: res.longitude,
name: ‘我的当前位置’,
address: ‘通过 wx.getLocation 获取’,
scale: 18
});
},
fail: (err) => {
console.error(“获取位置失败：”, err);
wx.showToast({
title: ‘获取位置失败，请检查手机定位权限’,
icon: ‘none’
});
}
});
}
五、 避坑指南与总结
坐标系错误坑：案例 PPT 第 16 页的代码截图中，wx.getLocation 的 type 属性被写成了 ‘gci02’，这会导致接口调用失败。正确的微信小程序标准坐标系应该是 ‘gcj02’。
真机调试权限：在微信开发者工具中调用 wx.getLocation 时，可能需要在右上角“详情”->“本地设置”中勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”。如果在真机上测试，务必确保手机开启了微信的定位权限。
Marker 气泡布局：callout 属性非常实用。设置 display: ‘ALWAYS’ 可以让气泡常驻显示，配合 bgColor、padding 和 borderRadius，可以完美还原 PPT 作业中要求的多种颜色标签样式。
结语
通过这个案例，我们不仅掌握了小程序
