Maps Javascript API 地图移动是否计费？

2026-10-24支付小周

结论

在同一个 Google Maps JavaScript API 地图实例中，使用 panTo()、panBy() 或 setCenter() 移动地图，通常不会产生新的地图加载费用。调整一个或多个 Marker 的位置，也不会被重新计为一次地图加载。

具体来说：

首次创建并显示地图时，通常计为一次地图加载。
连续调用 panTo()、panBy() 或 setCenter()，不会增加地图加载次数。
使用 marker.setPosition() 移动标记，不会增加地图加载次数。
刷新页面或重新创建地图实例，可能产生新的地图加载。
使用 Places、Geocoding、Routes、Street View 等服务时，可能按各自的 SKU 单独计费。

为什么移动地图不会重新计为加载

页面加载 Maps JavaScript API，并通过 google.maps.Map 创建可见的地图实例时，通常会产生一次地图加载：

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 31.2304, lng: 121.4737 },
  zoom: 12
});

地图创建后，平移、缩放和修改中心点都只是操作现有实例。地图在此过程中可能请求新的地图瓦片或渲染数据，但这不代表创建了另一张地图，通常也不会计为新的地图加载。

下面这些操作都发生在同一个 map 实例中：

map.panTo({ lat: 31.2200, lng: 121.4800 });
map.panBy(100, 50);
map.setCenter({ lat: 31.2100, lng: 121.4900 });

这些方法无论调用一次还是多次，都不会创建新的地图实例。

移动多个 Marker 的示例

下面的代码创建了一张地图和两个标记，随后更新地图中心和标记位置：

let map;
let markers = [];

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 31.2304, lng: 121.4737 },
    zoom: 12
  });

  markers = [
    new google.maps.Marker({
      map,
      position: { lat: 31.2304, lng: 121.4737 }
    }),
    new google.maps.Marker({
      map,
      position: { lat: 31.2200, lng: 121.4900 }
    })
  ];
}

function updateMap() {
  map.panTo({ lat: 31.2150, lng: 121.5000 });

  markers[0].setPosition({
    lat: 31.2180,
    lng: 121.5050
  });

  markers[1].setPosition({
    lat: 31.2100,
    lng: 121.5100
  });
}

即使多次调用 updateMap()，代码也只会更新已有的地图和标记，不会因此产生新的地图加载。

使用新版 AdvancedMarkerElement 时，可以直接修改它的 position：

advancedMarker.position = {
  lat: 31.2180,
  lng: 121.5050
};

这也只是更新现有标记的位置。

如何避免不必要的重复加载

尽量只创建一次地图实例，并保存引用供后续操作：

let map;

function initMap() {
  if (map) {
    return;
  }

  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 31.2304, lng: 121.4737 },
    zoom: 12
  });
}

移动地图时，不要反复执行以下代码：

function moveMapIncorrectly(position) {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: position,
    zoom: 12
  });
}

这种写法每次都会创建新的地图实例，可能增加地图加载次数。应当复用已有实例：

function moveMap(position) {
  map.panTo(position);
}

注意事项

页面刷新可能产生新的加载

用户刷新或重新打开页面，或者前端路由销毁地图组件后又重新创建，都可能触发新的地图加载。是否重新计费，要看是否创建并显示了新的地图实例，与用户移动地图的次数无关。

多个地图实例可能分别计算

如果一个页面同时创建多个可见的 google.maps.Map 实例，每个实例都可能计为一次地图加载：

const map1 = new google.maps.Map(document.getElementById("map1"), options);
const map2 = new google.maps.Map(document.getElementById("map2"), options);

如果页面只需要一张地图，应复用同一个实例。

其他 Google Maps 服务可能单独计费

移动地图本身不会额外计为地图加载，但以下功能可能单独产生费用：

用于将地址转换为坐标的 Geocoding API
用于地点搜索或自动补全的 Places API
路线规划相关服务
Street View
Maps Static API 或其他独立地图产品

例如，每次触发 dragend 事件时调用 Geocoding API，地图平移不会增加加载次数，但 Geocoding 请求可能单独计费：

map.addListener("dragend", async () => {
  const center = map.getCenter();

  // 如果在这里调用 Geocoding、Places 或 Routes 服务，
  // 相应请求可能按对应产品单独计费。
  console.log(center.lat(), center.lng());
});

Google Maps Platform 的 SKU、免费额度和计费规则可能调整。上线前应查看当前的 Google Maps Platform 官方定价页面，并核对项目账单中的实际 SKU 记录，同时为项目设置预算提醒和用量配额。