一、 实验目的
本次实验基于《案例4.9 map 组件》，旨在掌握微信小程序中地图组件（map）的基础使用，以及如何调用微信提供的原生位置接口（wx.getLocation、wx.chooseLocation、wx.openLocation）。同时，在基础案例的基础上，实现地图显示3个标记点（Markers）的功能扩展。
二、 项目准备与配置
1. 新建项目
打开微信开发者工具，新建一个项目，后端服务选择“不使用云服务”，模板选择“不使用模板”。
2. 配置权限 (app.json)
由于我们需要调用用户的地理位置，必须在app.json中声明权限。在文件中添加requiredPrivateInfos和permission字段：
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "map组件应用示例" }, "requiredPrivateInfos": [ "getLocation", "chooseLocation" ], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } }3. 准备图标资源
在项目根目录下新建images文件夹，放入两个标记点图标：loc01.png和loc02.png。
(注意：图标文件夹必须与 pages 同级，否则路径会报错 500)。
三、 核心代码实现
1. 页面结构 (index.wxml)
使用<map>组件占满主屏幕，并在底部放置两个按钮用于触发接口。
<view class="container"> <map id="myMap" class="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}" show-location="true" ></map> <view class="btnLayout"> <button type="primary" bindtap="chooseLocation">选择位置</button> <button type="warn" bindtap="openLocation">打开位置</button> </view> </view>2. 页面样式 (index.wxss)
采用 Flex 布局，让地图自适应高度，按钮并排显示在底部。
page { height: 100vh; display: flex; flex-direction: column; } .container { flex: 1; display: flex; flex-direction: column; padding: 10rpx; box-sizing: border-box; } .map { width: 100%; height: 700rpx; margin-bottom: 20rpx; } .btnLayout { display: flex; flex-direction: row; justify-content: space-evenly; padding: 20rpx 0; }3. 逻辑处理 (index.js) —— 实现3个标记点
在data中定义 3 个markers对象，并使用callout属性添加气泡提示。
Page({ data: { // 初始中心点 latitude: 45.7046, longitude: 126.6287, // 标记点集合（扩展要求：总共3个标记点） markers: [ { id: 0, latitude: 45.7046, longitude: 126.6287, width: 30, height: 30, iconPath: '/images/loc01.png', callout: { content: '我的位置', color: '#ff0000', fontSize: 14, borderRadius: 5, bgColor: '#ffffff', padding: 5, display: 'ALWAYS' } }, { id: 1, latitude: 45.7066, longitude: 126.6307, width: 30, height: 30, iconPath: '/images/loc02.png', callout: { content: '第四学生公寓', fontSize: 12, borderRadius: 5, bgColor: '#ffffff', padding: 5, display: 'ALWAYS' } }, { id: 2, latitude: 45.7026, longitude: 126.6267, width: 30, height: 30, iconPath: '/images/loc02.png', callout: { content: '黑龙江东方学院北门', fontSize: 12, borderRadius: 5, bgColor: '#ffffff', padding: 5, display: 'ALWAYS' } } ] }, // 选择位置功能 chooseLocation() { const that = this; wx.chooseLocation({ success(res) { // 更新地图中心点和经纬度 that.setData({ latitude: res.latitude, longitude: res.longitude }); } }); }, // 打开位置功能（查看当前位置） openLocation() { wx.getLocation({ type: 'gcj02', success(res) { wx.openLocation({ latitude: res.latitude, longitude: res.longitude, scale: 18, name: '我的当前位置' }); } }); } });四、 运行效果展示
运行小程序后，系统会自动请求位置权限。授权后，地图成功渲染，并显示了3个标记点（其中“我的位置”为红色气泡+自定义图标，其余两个地点为默认图标+地址气泡）。
点击“选择位置”按钮，成功唤起微信原生选点地图，选择新地址后，原地图中心点成功移动到新位置。
点击“打开位置”按钮，成功获取当前经纬度并唤起
wx.openLocation查看位置界面。
运行截图：
五、 实验总结
通过本次案例，掌握了map组件的核心属性配置，特别是markers数组的写法。在排错过程中，深刻理解了小程序的绝对路径引用方式（如/images/xxx.png），并学会了如何在app.json中配置隐私权限接口，这对于后续开发涉及用户地理位置的小程序打下了基础。
