微信小程序实验：map组件-开发者社区

微信小程序提供原生<map>地图组件，适合校园导航、点位展示类小程序开发。本文基于课程案例，实现地图渲染、获取当前位置、手动选择位置、唤起微信内置地图，同时配置 3 个标记点位，其中包含黑龙江东方学院第四学生公寓真实经纬度，完整代码可直接导入微信开发者工具运行。

一、map 组件基础介绍

<map>是小程序原生地图组件，支持设置地图中心点、缩放等级、markers 标记点、路线绘制等功能。

⚠️重要提醒：map 属于原生组件，部分 CSS 样式会失效；使用定位相关 API，必须配置权限，否则接口调用报错。

核心常用属性：

表格

属性	作用
longitude	地图中心经度
latitude	地图中心纬度
scale	地图缩放级别，范围 3‑20
markers	标记点数组，自定义图标、标题、经纬度

坐标系要求：小程序 map 组件统一使用gcj02 火星坐标系，直接使用 GPS 原始 WGS84 坐标会出现位置偏移。

二、项目目录结构

map组件/ ├── app.js ├── app.json # 定位权限核心配置 ├── app.wxss ├── images/ │ ├── loc01.png # 标记图标1 │ └── loc02.png # 标记图标2 └── pages/ └── index/ ├── index.js ├── index.wxml ├── index.wxss └── index.json

三、代码

app.json

调用getLocation、chooseLocation必须在app.json声明隐私接口与定位权限。

{ "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle":"light", "navigationBarTitleText": "map地图组件案例", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle":"black" }, "requiredPrivateInfos": [ "getLocation", "chooseLocation" ], "permission": { "scope.userLocation": { "desc": "用于获取你的位置展示在地图上" } } }

提示：本地开发调试无需申请权限；项目上线，需要在小程序后台接口设置中开通这两个定位接口权限。

index.wxml

地图视图，搭配两个功能按钮：选择位置、打开内置地图

<view class="box"> <view class="title">小程序Map地图演示</view> <!-- 地图组件 --> <map longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" style="width:100%;height:450rpx;"> </map> <view class="btnLayout"> <button bindtap="handleChooseLocation">选择位置</button> <button bindtap="handleOpenLocation">打开位置</button> </view> </view>

index.wxss

.box{ padding:20rpx; } .title{ text-align:center; font-size:32rpx; margin-bottom:20rpx; } .btnLayout{ margin-top:30rpx; display:flex; gap:20rpx; } .btnLayout button{ flex:1; }

index.js

第三个标记点使用真实经纬度：第四学生公寓经度 126.661975，纬度 45.576925

Page({ data:{ longitude:127.34, latitude:45.73, markers:[ { id:1, longitude:127.34, latitude:45.73, title:"我的位置", iconPath:"/images/loc01.png", width:28, height:28 }, { id:2, longitude:127.342, latitude:45.732, title:"黑龙江东方学院南门", iconPath:"/images/loc02.png", width:28, height:28 }, { id:3, longitude:126.661975, latitude:45.576925, title:"黑龙江东方学院第四学生公寓", iconPath:"/images/loc01.png", width:28, height:28 } ] }, // 手动选择位置 handleChooseLocation(){ 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) wx.showToast({title:"位置选择失败，请开启定位权限",icon:"none"}) } }) }, // 获取当前位置，打开微信内置地图 handleOpenLocation(){ wx.getLocation({ type:"gcj02", success:(res)=>{ wx.openLocation({ latitude:res.latitude, longitude:res.longitude, scale:14 }) }, fail:(err)=>{ console.error("获取位置失败",err) wx.showToast({title:"获取位置失败，请授权定位",icon:"none"}) } }) } })