小程序地图显示正常却看不到标记,先检查 markers 绑定和图标路径;想“回到当前位置”,则要区分当前地图中心和设备位置。旧记录中补上 iconPath 后标记恢复,但不能把这个个案推成地图组件的通用缺陷。
用最小标记排除路径和数据问题
下面用坐标原点作结构演示,不是用户实际位置。先在小程序工程中准备可加载的 /images/marker.png,再使用示例:
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"
markers="{{markers}}" style="width:100%;height:300px"></map>
<button bindtap="readCenter">读取地图中心</button>
对应页面 JS:
Page({
data: {
longitude: 0,
latitude: 0,
markers: [{
id: 1,
longitude: 0,
latitude: 0,
iconPath: "/images/marker.png",
width: 28,
height: 28,
callout: {
content: "示例位置\n第二行说明",
fontSize: 14,
color: "#333333",
bgColor: "#FFFFFF",
borderRadius: 4,
padding: 8,
display: "ALWAYS"
}
}],
centerText: ""
},
onReady() {
this.mapContext = wx.createMapContext("map");
},
readCenter() {
this.mapContext.getCenterLocation({
success: result => {
this.setData({
centerText: result.longitude + "," + result.latitude
});
},
fail: () => {
this.setData({ centerText: "读取中心失败" });
}
});
}
});
readCenter 把结果放入 centerText,模板可加一个 text 元素展示。图标是小程序工程资源,路径大小写、是否随包构建以及宽高都应检查。callout 的字体、颜色和 padding 放在嵌套对象中,不是 marker 顶层字段。腾讯位置服务小程序示例
地图中心不是当前设备位置
拖动地图后,getCenterLocation 读到的是视图中心。获取设备位置则涉及 wx.getLocation、坐标系、能力开放和用户隐私授权等条件,不应拿地图中心冒充用户位置。
若业务确需设备定位,先按当前小程序平台要求申请并声明相关能力,再在用户触发且允许的情况下调用。将定位结果的 longitude 与 latitude 一起更新到地图中心;失败时展示原因或保留可手动操作的地图,不默认重复弹授权。
调整 callout 时一次只改一个条件
旧稿把气泡不显示与个别颜色或样式值联系起来,但没有保留基础库和设备版本。排查时先让一个简单、有效的 marker 显示,再增加 callout 文本与样式;确认字段名和数据类型后,再看客户端差异。
完整属性、版本支持和位置能力以微信地图组件文档为准。示例用来解释数据结构,不承诺任意旧基础库或任意账号都具备相同的定位能力。
