本篇将实现从用户位置到选中景点的驾车路线规划，通过 renderOptions 让 JSAPI 自动在地图上渲染路线。

百度地图 JSAPI 提供了多种路线规划服务：

景点检索范围是 10km，驾车最为实用。

通过 LocalSearch 的 onInfoHtmlSet 回调，在 JSAPI 自动生成的地点详情弹窗中追加导航按钮：

var localSearch = new BMap.LocalSearch(map, {
    renderOptions: {
        map: map,
        panel: document.getElementById('resultPanel'),
        autoViewport: true,
        viewportOptions: {
            margins: [30, 20, 20, 320]
        }
    },
    pageCapacity: 10,
    onInfoHtmlSet: function(poi, html) {
        if (poi && poi.point) {
            var btn = document.createElement('button');
            btn.className = 'nav-btn';
            btn.textContent = '到这去';
            btn.onclick = function() {
                driveTo(poi.point.lng, poi.point.lat);
            };
            var container = html.querySelector('.BMap_PDPannel_detail');
            if (container) container.appendChild(btn);
        }
    }
});

说明：

• onInfoHtmlSet(poi, html) —— 地点详情弹窗渲染完成时触发，html 是弹窗的 DOM 元素

• 从 html 中查找 .BMap_PDPannel_detail 容器并追加按钮

点击「到这去」后调用 driveTo 函数，传入目标景点的经纬度：

var drivingRoute = null;

function driveTo(lng, lat) {
    var endPoint = new BMap.Point(lng, lat);
    var startPoint = currentPosition;

    localSearch.clearSelected();

    if (drivingRoute) {
        drivingRoute.clearResults();
    }

    drivingRoute = new BMap.DrivingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true,
            viewportOptions: {
                margins: [30, 20, 20, 320]
            }
        }
    });
    drivingRoute.search(startPoint, endPoint);
}

代码解释：

• localSearch.clearSelected() —— 关闭当前打开的地点详情弹窗

• renderOptions.map —— 指定地图实例，路线会自动渲染在地图上（折线 + 起终点标记）

• renderOptions.autoViewport —— 自动调整地图视野，确保起终点都在可视范围内

• viewportOptions.margins —— 左侧留出 320px 避开面板

• 每次规划前先 clearResults() 清除上一次路线

本篇用 DrivingRoute 配合 renderOptions 实现了驾车路线规划，JSAPI 自动渲染路线和调整视野，代码非常简洁。下一篇是系列最后一步——给地图应用个性化样式。