layui 自带的示高 layui.map 模块其实是个空壳，真正干活的德地是高德地图 JS API。很多人卡在第一步：以为引入 layui 就完事了，示高结果地图容器一片空白。德地我上周帮同事排查这个问题，示高他的德地代码里 layui.use('map') 写得好好的，但高德 key 没配，示高控制台报 INVALID_USER_KEY，德地折腾了半小时才反应过来。示高

先看最小可运行版本。德地HTML 里必须给地图容器一个明确高度，示高`

<script src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>

key 要去高德开放平台申请，选 Web 端 JS API 类型。有个坑：新申请的 key 默认绑定了安全密钥 jscode，如果你在本地 file:// 协议下打开，地图会加载失败。解决办法是起个本地服务器，或者在高德控制台把 jscode 校验关掉——生产环境别这么干。

layui 这边，核心就一行：

layui.use(['map'], function(){  var map = new AMap.Map('map', {  zoom: 12, center: [116.397, 39.908] }); });

注意这里没有用 layui.map 的任何方法，直接调 AMap 构造函数。layui 的 map 模块只是帮你把 AMap 对象挂到 layui 命名空间下，实际参数还是高德那套。有人问为什么不用 layui.map 的 render 方法——那个方法文档少得可怜，参数格式跟高德原生对不上，我试过一次就放弃了。

加标记点也简单。假设你要在故宫位置打个点：

var marker = new AMap.Marker({  position: [116.397, 39.918], title: '故宫' }); map.add(marker);

如果标记多了，记得用 AMap.MarkerCluster 做聚合，不然满屏都是点，缩放时性能掉得厉害。我做过一个门店分布图，200 多个点没聚合，Chrome 里拖拽直接卡成幻灯片。

事件绑定这块，layui 的模块化写法容易让人绕进去。直接给 map 实例绑：

map.on('click', function(e) {  console.log(e.lnglat.getLng(), e.lnglat.getLat()); });

别去 layui 的 event 系统里找，高德地图的事件跟 layui 的 event 是两套东西。我见过有人在 layui.use 回调里写 layui.onevent，完全跑不通。

还有个细节：容器尺寸变化时地图要调 `map.resize()`。layui 的 tab 切换或者侧边栏折叠后，地图会显示不全。我一般用 ResizeObserver 监听容器，或者干脆在 tab 切换的回调里手动调一次。这个坑在后台管理系统里特别常见，左侧菜单一收，地图右边就白了一块。

最后说下版本。高德 JS API 从 1.4 升到 2.0 后，部分类名和参数变了，比如 `AMap.Map` 的 `resizeEnable` 在 2.0 里默认开启。如果你从网上抄的代码跑不起来，先看下 script 标签里的版本号。layui 2.6+ 对 ES6 支持还行，但高德 2.0 用了 Promise，老项目里如果 babel 没配好，IE 下会直接报错——虽然现在没人管 IE 了。

实际项目里我更喜欢把地图初始化封装成一个 layui 模块，用 `layui.define` 导出，这样多个页面复用方便。但别过度封装，高德 API 本身够灵活，包太多层反而查问题麻烦。