小程序地图显示正常却看不到标记,先检查 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 文本与样式;确认字段名和数据类型后,再看客户端差异。

完整属性、版本支持和位置能力以微信地图组件文档为准。示例用来解释数据结构,不承诺任意旧基础库或任意账号都具备相同的定位能力。