javascript地图如何集成_如何调用第三方API

地图初始化失败因未等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 上。

• 高德需先执行 AMap.initAMapApiLoader(...)，再 AMap.Map
• 百度需等 window.BMap 存在，或用 document.write 同步加载（不推荐）
• 若用 ES 模块，高德官方 SDK 不支持直接 import，得配合 dynamic import() + define 魔法注释

简单起见，推荐用 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 尺寸极其敏感，初始化之后再改容器大小，几乎一定需要显式通知重绘。