ASP.NET 整合百度地圖 API：依地址顯示座標與縮放控制

在 ASP.NET WebForms 或 MVC 專案中，需根據使用者輸入的地址字串，呼叫百度地圖 API 進行地理編碼，取得經緯度並顯示地圖、支援縮放。以下提供完整整合步驟與關鍵代碼。

前置準備

1. 至 百度地圖開放平台 申請 AK（存取金鑰）。
2. 引入百度地圖 JS API：
   <script src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>

前端頁面佈局

<input type="text" id="txtAddress" placeholder="請輸入地址" />
<button id="btnSearch">搜尋地圖</button>
<div id="mapContainer" style="width:100%; height:500px;"></div>

JavaScript 核心邏輯

<script>
var map = new BMap.Map("mapContainer");
map.enableScrollWheelZoom(true);  // 滾輪縮放
map.addControl(new BMap.NavigationControl()); // 縮放平移控制項

var geocoder = new BMap.Geocoder();

$("#btnSearch").click(function() {
    var address = $("#txtAddress").val().trim();
    if (!address) { alert("請輸入地址"); return; }

    geocoder.getPoint(address, function(point) {
        if (point) {
            map.centerAndZoom(point, 15); // 中心點與縮放級別
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳動動畫
        } else {
            alert("未找到該地址，請嘗試更詳細的描述");
        }
    }, "台灣"); // 指定城市/國家提高準確度
});
</script>

後端（可選）代理請求

若不想暴露 AK 於前端，或需伺服器端批次處理，可建立 ASP.NET Web API / Generic Handler (.ashx) 代理百度 HTTP API：

// C# 範例：HttpClient 呼叫百度地理編碼 API
public async Task<object> Geocode(string address) {
    var url = $"https://api.map.baidu.com/geocoding/v3/?address={Uri.EscapeDataString(address)}&output=json&ak={AK}";
    using (var client = new HttpClient()) {
        var json = await client.GetStringAsync(url);
        return JsonConvert.DeserializeObject(json); // 回傳給前端
    }
}

常見問題與優化

• 地址解析失敗：確保地址包含城市名（如「台北市信義路五段7號」），可在 getPoint 第三參數指定城市。
• HTTPS 頁面引入 HTTP API 被瀏覽器攔截：百度地圖 API 支援 HTTPS，將引入網址改為 https://api.map.baidu.com/...。
• 大量標記效能：使用 MarkerClusterer 聚合顯示，避免地圖卡頓。
• 配置額度：免費額度有限，生產環境需申請付費配額。

掌握百度地圖 API 的地理編碼與地圖初始化流程，即可快速建構地址查詢與顯示功能。