本篇将引入 JSAPI 的 Autocomplete 输入提示组件，让用户搜索地点时获得智能联想；选中地点后直接获取坐标，用 flyTo 飞到目标位置，再用 LocalSearch 的 renderOptions 自动渲染周边景点 POI 和结果面板。

在地图左侧添加一个面板，包含 input 元素和结果容器：

<div class="side-panel">
    <input id="suggestInput" type="text" placeholder="搜索地点，如：望京、三里屯、西单...">
    <div class="result-panel" id="resultPanel"></div>
</div>

BMap.Autocomplete 是 JSAPI 内置的输入提示组件，只需绑定一个 input 元素，输入时会自动弹出地点联想列表：

var autocomplete = new BMap.Autocomplete({
    input: 'suggestInput',
    location: map,
    onConfirm: function(item) {
        var poi = item.value;
        var loc = poi.location;
        if (!loc) return;
        currentPosition = new BMap.Point(loc.lng, loc.lat);
        map.flyTo(currentPosition, 13);
        updateLocationOverlays();
        searchNearbySpots(currentPosition);
    }
});

参数说明：

• input —— 文本输入框的 id 或 DOM 元素

• location —— 设定返回结果的范围，传入 map 实例会基于当前地图视野范围进行推荐

• onConfirm —— 用户选中某条建议项时的回调函数

用户开始输入时，Autocomplete 会自动在输入框下方弹出联想列表。

onConfirm 回调参数 item 包含 index（索引）和 value（AutocompleteResultPoi）：
流程说明：

1. item.value 包含 province、city、district、street、business 等字段

2. item.value.location 返回包含 lng/lat 的坐标对象，需通过 new BMap.Point() 构造坐标点

3. flyTo 飞行 → 更新覆盖物位置 → 发起周边检索

BMap.LocalSearch提供地点检索能力，使用 LocalSearch 的 renderOptions 配置，可以让 JSAPI 自动将检索结果渲染为 Marker 并填充结果面板：

var localSearch = new BMap.LocalSearch(map, {
    renderOptions: {
        map: map,
        panel: document.getElementById('resultPanel'),
        autoViewport: true,
        viewportOptions: {
            margins: [30, 20, 20, 320]
        }
    },
    pageCapacity: 10
});

function searchNearbySpots(center) {
    localSearch.searchNearby('景点', center, searchRadius);
}

• renderOptions.map —— JSAPI 自动在地图上添加 Marker

• renderOptions.panel —— 自动将结果列表渲染到指定 DOM 容器

• autoViewport: true —— 自动调整视野以包含所有结果标注

• viewportOptions.margins —— 设置视野边距 [上, 右, 下, 左]，左侧 320px 避开面板遮挡

• pageCapacity: 10 —— 每页显示 10 条结果

本篇引入了 Autocomplete 输入提示组件实现地点搜索，通过 onConfirm 回调直接获取坐标 → flyTo 飞行 → LocalSearch renderOptions 自动渲染周边景点。下一篇将在地点详情弹窗中加入「到这去」按钮实现驾车路线规划。