JSP 集成百度地圖：Select 下拉動態加載地圖實戰

業務場景

頁面包含 <select> 下拉框（城市/地標），用戶選擇後動態在 <div id="map"> 中顯示對應百度地圖。

核心思路

1. 下拉框綁定 onchange 事件，獲取選中值（地址名或經緯度）。
2. 調用百度地圖 API map.centerAndZoom() 或 geocoder.getPoint() 定位。
3. 若選項為經緯度直接 new BMap.Point(lng, lat)；若為地址字符串用 BMap.Geocoder 解析。

完整代碼示例

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>
    <style>#map{width:100%;height:400px;}</style>
</head>
<body>
<select id="locationSelect" onchange="loadMap(this.value)">
    <option value="">--請選擇--</option>
    <option value="北京市天安門">天安門</option>
    <option value="116.404,39.915">天安門(經緯度)</option>
    <option value="上海市外灘">外灘</option>
</select>
<div id="map"></div>

<script>
var map = new BMap.Map("map");
map.enableScrollWheelZoom();

function loadMap(val) {
    if (!val) return;
    var parts = val.split(",");
    if (parts.length === 2) {
        // 經緯度模式
        var point = new BMap.Point(parseFloat(parts[0]), parseFloat(parts[1]));
        map.centerAndZoom(point, 15);
        new BMap.Marker(point).addTo(map);
    } else {
        // 地址模式
        var geocoder = new BMap.Geocoder();
        geocoder.getPoint(val, function(point) {
            if (point) {
                map.centerAndZoom(point, 15);
                new BMap.Marker(point).addTo(map);
            } else {
                alert("地址解析失敗：" + val);
            }
        });
    }
}
</script>
</body>
</html>

關鍵點

• AK 申請：百度開放平台創建應用獲取 AK，填入 ak=您的AK。
• HTTP/HTTPS 一致：頁面若 HTTPS，API 必須用 HTTPS 鏈接（https://api.map.baidu.com）。
• 解析失敗處理：地址模糊時提示用戶或降級展示城市中心。
• 性能優化：map.clearOverlays() 先清除舊標註，避免疊加。

進階：數據驅動下拉選項

<select id="locationSelect">
    <c:forEach items="${locations}" var="loc">
        <option value="${loc.lng},${loc.lat}">${loc.name}</option>
    </c:forEach>
</select>

後端查詢數據庫/緩存返回 List<Location>，前端 JSTL 渲染，前後端分離更清晰。

總結

JSP + 百度地圖動態加載核心：**Select onchange → 判斷值類型(地址/經緯度) → Geocoder 或直接 Point → centerAndZoom + Marker**。代碼量極少，靈活應對各類業務。