微信小程序必须用原生组件显示地图，需在wxml中声明并绑定longitude、latitude等数字类型数据，配合wx.getlocation获取定位，markers用本地图标路径，叠加ui须用cover-view且限于内部。
小程序里不能直接用 HTML 写地图页面——HTML 本身在微信小程序中不生效，所有视图层必须用 wxml，逻辑层必须用 js，地图渲染依赖原生组件 <map></map>，不是靠 iframe 或 div + JavaScript SDK 模拟。
微信小程序怎么用 <map></map> 显示定位地图
微信小程序的 <map></map> 是原生组件，性能好、支持真机定位和标记点，但不能用 CSS 随意缩放或覆盖 DOM 元素。它不接受 HTML 字符串，也不走浏览器地理 API。
- 必须在
wxml中写<map longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}" bindmarkertap="onMarkerTap"></map> -
longitude和latitude必须是数字类型（不是字符串），否则地图中心不生效 - 初始化前建议先调用
wx.getLocation获取当前坐标，失败时需降级到默认城市中心（如北京116.404, 39.915） -
markers是数组，每个项至少含id、latitude、longitude、name；图标要用iconPath（本地路径，不支持网络图）
wx.getLocation 失败的常见原因和绕过方法
真机调试时 wx.getLocation 报 fail:system permission denied 或直接静默失败，基本不是代码问题，而是配置或系统限制。
- 确保
app.json里已声明"requiredPrivateInfos": ["getLocation"]（2023 年底起强制要求） - 基础库版本低于
2.24.0时，type: 'wgs84'在 iOS 上可能返回错误坐标，统一用'gcj02' - 安卓部分厂商（如华为、小米）会拦截后台定位，首次进入页面需手动触发按钮点击再调用，不能 onLoad 就自动执行
- 用户拒绝授权后，再次调用
wx.openSetting才能唤起设置页——但仅限一次，第二次调用无效，得引导用户手动进小程序设置
如何在 <map></map> 上叠加自定义 UI 层（比如搜索框、悬浮按钮）
<map></map> 是原生组件，层级最高，所有 wxml 子节点（包括 <cover-view></cover-view>）都必须用 cover-view + cover-image，且只能放在 <map></map> 标签内部，否则不显示。
- 写法必须是：
<map>...<cover-view class="search-box"><cover-input placeholder="搜地点"></cover-input></cover-view></map> -
cover-view不支持z-index、position: fixed，定位靠top/right等内联样式，单位只能是rpx或px -
cover-input无法绑定bindinput，得用bindconfirm+value双向绑定模拟，且输入法兼容性差（iOS 常不唤起） - 真机上
cover-view动画卡顿严重，避免做 translate 或 opacity 过渡
真正难的不是画出地图，而是处理「用户没开定位」、「地图加载空白」、「标记点偏移几百米」、「cover-view 键盘顶起错位」这些边界情况；它们不会报错，但会让整个功能在特定机型上完全不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
