百度地圖 API 內嵌圖片隨地圖縮放：GroundOverlay 覆蓋物一鍵實現

核心類

BMap.GroundOverlay：將圖片綁定到地理邊界（Bounds），隨地圖平移/縮放自動縮放。

代碼示例

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// 圖片 URL + 西南/東北角經緯度
var bounds = new BMap.Bounds(
    new BMap.Point(116.3, 39.8),
    new BMap.Point(116.5, 40.0)
);
var overlay = new BMap.GroundOverlay("https://example.com/floor.png", bounds, {
    opacity: 0.8,
    displayOnMinLevel: 10,
    displayOnMaxLevel: 18
});
map.addOverlay(overlay);

關鍵參數

• bounds：圖片覆蓋的地理矩形區域。
• opacity：透明度（0-1），疊加底圖時常用 0.6-0.8。
• displayOnMinLevel/MaxLevel：控制顯示縮放級別範圍，避免過度縮放模糊/過載。

進階：動態更新圖片

overlay.setImageURL("new.png");
overlay.setBounds(newBounds);

用 GroundOverlay 替代自定義 Canvas 繪圖，省去投影轉換、瓦片管理等繁瑣邏輯，官方原生能力最穩健。