本篇将在地图上添加两个覆盖物：用自定义蓝色圆点 Marker 标注搜索中心位置，用 Circle 展示周边 10km 的检索范围。

覆盖物（Overlay）是叠加在地图上的各种元素，它们随地图移动和缩放。常见的覆盖物包括：

所有覆盖物都通过 map.addOverlay(overlay) 添加到地图上。

我们用一个蓝色圆点来标注搜索中心位置，让它区别于后续景点 POI 的默认红色标记。

// 定义蓝色圆点图标（使用内联 SVG）
var locationIcon = new BMap.Icon(
    'data:image/svg+xml,' + encodeURIComponent(
        '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">' +
        '<circle cx="10" cy="10" r="8" fill="#1890ff" stroke="#fff" stroke-width="3"/>' +
        '</svg>'
    ),
    new BMap.Size(20, 20)
);

// 创建 Marker 并添加到地图
var locationMarker = new BMap.Marker(currentPosition, {
    icon: locationIcon,
    anchor: BMAP_ANCHOR_CENTER,
    enableMassClear: false
});
map.addOverlay(locationMarker);

代码解释：

• BMap.Icon(url, size) —— 创建自定义图标

• url：图标图片地址，这里用 data URI 内联一个 SVG 蓝色圆点

• size：图标尺寸（宽20px × 高20px）

• anchor: BMAP_ANCHOR_CENTER —— 通过 MarkerOptions 设置锚点居中，图标中心对齐坐标点

• enableMassClear: false —— 后续我们会用 map.clearOverlays() 清除 POI 标记，这个设置让中心点标记不被误删

我们画一个以中心点为圆心、半径 10000 米的圆形，直观展示「周边 10 公里」的范围。

var searchRadius = 10000; // 单位：米

var circle = new BMap.Circle(currentPosition, searchRadius, {
    enableMassClear: false
});
map.addOverlay(circle);

参数说明：

• 第一个参数：圆心坐标（BMap.Point）

• 第二个参数：半径（米）

• 第三个参数：选项，这里只设置 enableMassClear: false 避免被批量清除，样式使用默认值

当用户切换搜索位置时，需要更新覆盖物的位置：

function updateLocationOverlays() {
    locationMarker.setPosition(currentPosition);
    circle.setCenter(currentPosition);
}

本篇用 Marker 自定义蓝色圆点标注了搜索中心，用 Circle 画出 10km 检索范围圈。下一篇将实现搜索功能——通过 Autocomplete 输入提示选择地点，并在范围内搜索景点 POI。