项目简介
本案例基于微信原生小程序开发，演示map地图组件以及位置接口wx.getLocation、wx.chooseLocation、wx.openLocation的使用。
页面展示地图，包含 3 个地图标记点位；提供选择位置、打开位置两个按钮，实现地图选点、唤起微信内置地图的功能。
项目不使用第三方 npm 组件，页面视觉效果参考课程 PPT 案例。
项目目录结构
map组件 ├─ images # 地图标记图标文件夹 │ ├─ loc01.png │ └─ loc02.png ├─ pages │ └─ index │ ├─ index.wxml │ ├─ index.wxss │ ├─ index.js │ └─ index.json ├─ app.json └─ app.wxssapp.json
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "skyline", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "defaultContentBox": true, "tagNameStyleIsolation": "legacy", "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "requiredPrivateInfos": [ "getLocation", "chooseLocation" ], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "componentFramework": "glass‑easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }配置说明
requiredPrivateInfos：声明将要调用的位置接口。permission：申请用户位置权限，填写权限描述。navigationStyle":"custom"开启自定义导航模式。
app.wxss
/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: #ff7d00; }pages/index/index.wxml
<!--index.wxml--> <view style="margin-top:40rpx;height:88rpx;display:flex;align-items:center;justify-content:center;font-size:32rpx;background:#ffffff;color:#000000;">map组件</view> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">地图组件应用示例</view> <map id="my-map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" show-location="true" /> <view class="btnLayout"> <button type="primary" size="mini" bind:tap="chooseLocation">选择位置</button> <button type="primary" size="mini" bind:tap="openLocation">打开位置</button> </view> </view> </scroll-view>pages/index/index.wxss
/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } map { margin: 20rpx 0; width: 100%; height: 700rpx; } .btnLayout { display: flex; flex-direction: row; justify-content: space‑evenly; }pages/index/index.json
{}pages/index/index.js
// index.js Page({ data: { longitude: 126.660821, // 经度 latitude: 45.572903, // 纬度 markers: [{ id: 1, longitude: 126.660821, latitude: 45.572903, iconPath: '/images/loc01.png', width: 28, height: 28, label: { content: '我的位置', color: '#0000ff', bgColor: '#ffff00', fontSize: 20 } }, { id: 2, longitude: 126.659702, latitude: 45.57112, iconPath: '/images/loc02.png', width: 32, height: 32, label: { content: '黑龙江东方学院南门', color: '#ffff00', bgColor: '#ff00ff', fontSize: 20 } }, { id:3, longitude:126.672000, latitude:45.574200, iconPath:'/images/loc02.png', width:32, height:32, label:{ content:'第一学生公寓', color:'#00ffff', bgColor:'#0000ff', fontSize:20 } } ] }, chooseLocation() { wx.chooseLocation({ success: (res) => { console.log(res); this.setData({ longitude: res.longitude, latitude: res.latitude }) } }) }, openLocation() { wx.getLocation({ type: 'gcj02', success: (res) => { wx.openLocation({ latitude: res.latitude, longitude: res.longitude, }) } }) } })功能说明
- 地图渲染与标记点
map组件设置中心点经纬度，markers数组定义地图标记，一共 3 个标记：我的位置、黑龙江东方学院南门、第一学生公寓。每个标记配置自定义图标、文字标签、文字颜色与背景色。 - 选择位置按钮 chooseLocation
调用wx.chooseLocation()，打开微信地图选点界面，用户选择地点点击完成后，将选中地点的经纬度赋值给地图，更新地图中心点。 - 打开位置按钮 openLocation
调用wx.getLocation()获取设备当前位置（坐标系 gcj02），拿到经纬度后调用wx.openLocation()唤起微信内置地图，可以实现导航、打车等操作。
运行步骤
- 在项目根目录新建
images文件夹，放入loc01.png、loc02.png两张标记图片。 - 将上面所有代码对应复制到各个文件。
- 点击开发者工具编译，模拟器允许位置权限。
- 测试页面：查看 3 个标记点是否正常显示；分别点击两个按钮测试位置功能。
上线提示：如果小程序需要发布上线，需要在小程序管理后台【开发】-【开发管理】-【接口设置】自助开通
getLocation与chooseLocation接口权限。
