UniApp 微信小程序 Map 组件自定义标记自定义marker气泡实现方案

微信小程序地图自定义标记从 Web 到小程序的踩坑实录一、需求地图上显示带时间信息的打卡点起点开图标 09:12 地点名称终点关图标 18:30 地点名称二、Web 端怎么做高德/百度地图 JS API 支持直接传 HTMLconstmarkernewAMap.Marker({content:div classbubble img src/icon/start.svg/ span09:12 起点位置/span /div,position:[116.397428,39.90923],offset:newAMap.Pixel(-20,-30)});CSS 随便写响应式、动画、交互都能做。完事。三、小程序为什么做不了微信小程序的 Map 组件constmarker{id:1,latitude:30.5928,longitude:114.3055,iconPath:/static/marker.png,// ← 只能传图片路径width:40,height:40};没有content属性不支持 HTML只认图片。小程序运行环境是 JSCore不是浏览器没有 DOM没有 CSS 渲染引擎无法对元素截图四、尝试过的方案方案 1预生成所有图片放弃想法让设计师把各种时间组合都出图。问题时间是动态的无法穷举地点名称也是动态的包体积爆炸结论静态方案不可行。方案 2html2canvas失败想法Web 端常用 html2canvas 把 DOM 转图片小程序应该也行。代码importhtml2canvasfromhtml2canvas;constcanvasawaithtml2canvas(document.getElementById(bubble));报错document is not defined失败原因小程序没有document对象。方案 3小程序原生组件 截图失败想法用cover-view渲染气泡然后用小程序 API 截图。代码cover-view idbubble styleposition:fixed;left:-9999px cover-image src/icon.svg/ cover-view09:12/cover-view /cover-view问题小程序没有通用的 DOM 截图 APIcanvasToTempFilePath只能导出 Canvas不能导出任意组件left: -9999px的元素获取不到尺寸失败原因小程序没有截图能力。方案 4base64 图片失败想法把 SVG 转成 base64直接作为 iconPath。代码constmarker{iconPath:data:image/svgxml;base64,PHN2Zy...};报错iconPath 不支持 base64 格式失败原因小程序 Map 只支持本地路径或网络 URL。五、最终方案Canvas 绘制唯一可行的路用 Canvas 2D API 把气泡画出来导出临时图片。流程配置文字、图标→ Canvas 绘制 → 导出临时文件 → 设置 marker核心代码// 1. 获取 Canvas必须在组件实例上下文中constqueryuni.createSelectorQuery().in(instance.proxy);const{node:canvas}awaitnewPromise(rquery.select(#bubble-canvas).fields({node:true},r).exec());constctxcanvas.getContext(2d);// 2. 计算尺寸consttextWidthctx.measureText(09:12 起点).width;constwidthpaddingiconSizegaptextWidthpadding;// 3. 绘制ctx.fillStyle#FFF;roundRect(ctx,0,0,width,height,30);// 圆角背景ctx.fill();consticonawaitloadImage(/static/icon.svg,canvas);ctx.drawImage(icon,padding,y,iconSize,iconSize);ctx.fillStyle#1A1A1A;ctx.fillText(09:12 起点,textX,height/2);// 4. 导出const{tempFilePath}awaituni.canvasToTempFilePath({canvas});思想是这个就行了具体怎么用canvas绘制可以用ai写工具函数这里有些函数篇幅太长就没有截图使用BubbleRenderer text09:12 起点位置 icon-path/static/icon/map_tags_20.svg rendered(path, w, h) addMarker(path, w, h) /六、踩坑记录坑现象解决Canvas 获取不到node为 undefined.in(instance.proxy)指定组件上下文roundRect报错API 不支持用arcTo手动画圆角marker 宽度无效[object Object]Math.round(Number(width))转整数SVG 加载失败图标不显示加超时处理失败画占位圆七、总结Web 端HTML CSS → 直接渲染小程序Canvas API → 手动绘制 → 导出图片小程序没有 DOM地图只认图片所以必须用 Canvas 把组件画成图片。