地图初始化失败因未等sdk加载完就调用new google.maps.map；需用callback或load事件；高德/百度需确保加载完成再实例化；地理编码须后端代理防密钥泄露和cors；marker失效多因容器无宽高或被隐藏，需设尺寸并手动resize。
地图初始化失败：没加载 SDK 就调用 new google.maps.Map
常见错误是直接在页面里写 new google.maps.Map(...)，但 google.maps 还没定义。Google Maps JavaScript API 必须等 https://maps.googleapis.com/maps/api/js 加载完成才能用。
正确做法是等 callback 触发，或监听 load 事件：
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 39.9042, lng: 116.4074 },
zoom: 12
});
}
// 在 script 标签里加 &callback=initMap
// &key=YOUR_API_KEY
注意：callback 参数必须是全局函数名（不能是箭头函数或模块内声明的函数），否则 SDK 找不到入口。
高德/百度地图替代方案：为什么不用 Google 的时候要改初始化方式
高德（AMap）和百度（BMap）不依赖 callback 全局函数，但加载时机仍关键——它们都提供异步加载方法，且默认不挂载到 window 上。
立即学习“Java免费学习笔记（深入）”；
- 高德需先执行
AMap.initAMapApiLoader(...)，再AMap.Map - 百度需等
window.BMap存在，或用document.write同步加载（不推荐） - 若用 ES 模块，高德官方 SDK 不支持直接
import，得配合dynamic import()+define魔法注释
简单起见，推荐用 script 标签同步加载：
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY"></script>
<script>
const map = new AMap.Map('map', {
center: [116.397428, 39.90923],
zoom: 12
});
</script>
调用地理编码 API：前端直接请求会触发 CORS 或密钥泄露
不能在前端 JS 里用 fetch 直接调 Google 地址解析接口（如 https://maps.googleapis.com/maps/api/geocode/json?address=xxx&key=xxx），原因有两个：
- Google 禁止前端暴露
key，服务端校验 referer 后会拒绝请求 - 浏览器会拦截跨域响应（即使返回 200）
正确路径是走后端代理：
- 前端发请求到自己的
/api/geocode?address=xxx - 后端用
axios或fetch转发到 Google/Baidu/AMap 接口（带 key） - 后端响应时过滤掉敏感字段（如
place_id、types中的内部标识）
百度和高德虽允许前端 key，但依然不建议——key 一旦泄漏，别人可盗用配额甚至被恶意刷量。
Marker 点击事件失效：地图容器未设置宽高或被父级隐藏
google.maps.Marker 或 AMap.Marker 创建后点不动，大概率不是代码问题，而是 CSS 导致：
- 容器
div#map没设height（默认为 0），地图渲染区域实际不可见 - 父级用了
display: none或visibility: hidden，地图初始化时尺寸计算为 0，后续 show 也不自动重绘 - 使用了
transform: scale()缩放容器，导致点击坐标映射错乱
解决办法：
- 给地图容器加
style="width: 100%; height: 400px;"（百分比需确保父级有高度） - 如果地图在 Tab 页或 Modal 里，首次显示时手动触发
map.resize()（Google）或map.resize()（高德） - 避免对地图容器用
transform，改用zoom控制缩放
地图 SDK 对 DOM 尺寸极其敏感，初始化之后再改容器大小，几乎一定需要显式通知重绘。
