百度地图轨迹线拾取工具技术说明

百度地图轨迹线拾取工具使用说明

一、工具概述

本工具基于百度地图 API 开发，旨在帮助用户在地图上绘制轨迹线，并能够获取轨迹线经过的经纬度信息，同时提供了基本的绘制控制功能，如开始绘制、停止绘制以及清除绘制内容等操作。

二、使用准备

1. 引入必要文件：确保在使用该工具的 HTML 文件中正确引入百度地图 API 的 JavaScript 文件，以及本工具的相关 JavaScript 和 CSS 文件（如果有自定义样式）。同时，确保图片资源（如用于标记的图标文件ending.png）路径正确，放置在指定的images文件夹中（或根据实际代码中的路径进行调整）。
2. HTML 结构准备：在 HTML 文件中，需要有一个具有id为allmap的div元素，该元素将作为地图的容器，用于展示百度地图。例如：

<div id="allmap" style="width: 100%; height: 500px;"></div>

同时，建议添加一个用于显示经纬度信息的div元素，例如：

<div id="result"></div>

三、功能使用说明

（一）地图初始化与基本设置

1. 当页面加载完成后，地图将自动初始化，并以指定的经纬度（116.404, 39.915）为中心，缩放级别为14进行显示。

var map = new BMap.Map("allmap", {
    enableMapClick: false
});
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);

2. 地图添加了地图类型控件，用户可以在普通地图和卫星地图两种类型之间切换，方便查看不同的地图背景。

map.addControl(new BMap.MapTypeControl({
    mapTypes: [
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
    ]
}));

3. 开启了鼠标滚轮缩放功能，用户可以通过滚动鼠标滚轮来缩放地图视图，同时禁用了双击缩放地图的操作，以避免不必要的缩放干扰。

map.enableScrollWheelZoom(true);
map.disableDoubleClickZoom();

（二）轨迹绘制操作

1. 开始绘制：按下键盘上的s键，即可开始绘制轨迹线。此时，工具会进行以下操作：

• 初始化轨迹线对象（如果尚未初始化），设置轨迹线的颜色为#00cc66，线宽为5像素，透明度为0.8，并将其添加到地图上。

if (!polyline) {
    polyline = new BMap.Polyline([], {strokeColor: "#00cc66", strokeWeight: 5, strokeOpacity: 0.8});
    map.addOverlay(polyline);
}

- 开始监听鼠标移动事件，当鼠标在地图上移动时，会根据鼠标位置绘制轨迹线。每次鼠标移动，都会将当前鼠标位置添加到轨迹线的路径中，并在地图上更新显示轨迹线和标记点。

map.addEventListener('mousemove', function (e) {
    if (isDrawing) {
        drawTrail(e.point);
    }
});

- 当在绘制状态下第一次按下鼠标时，会记录当前鼠标位置作为轨迹线的起点，并在起点处添加一个标记（在本代码中，为了保证连续绘制效果，起点处的标记未实际添加，但相关代码已注释说明）。

map.addEventListener('mousedown', function (e) {
    if (isDrawing &&!lastPoint) {
        lastPoint = e.point;
        // 在起点处添加一个标记（可选）
        // var startMarker = new BMap.Marker(lastPoint, {icon: myIcon});
        // map.addOverlay(startMarker);
    }
}, {single: true});

2. 绘制过程中：在绘制轨迹线的过程中，鼠标在地图上移动时，会实时更新轨迹线的路径，并在当前鼠标位置添加一个标记，标记使用自定义的图标ending.png，并将经纬度信息显示在id为result的div元素中，每个经纬度之间以;分隔。
3. 停止绘制：在地图上任意位置单击鼠标左键，即可停止绘制轨迹线。此时，工具会进行以下操作：

• 将isDrawing标志设置为false，停止对鼠标移动事件的监听，从而停止轨迹线的绘制。

map.addEventListener('click', function (e) {
    var newPoint = new BMap.Point(e.point.lng, e.point.lat);
    // 使用 panTo 方法将地图中心平移到新位置
    map.panTo(newPoint);
    isDrawing = false;
});

- 如果在停止绘制时，存在最后一个标记点（`mk`），可以选择保留该标记点在地图上（在本代码中，由于每次`mousemove`都更新了`mk`，所以这里未做特殊处理，但相关逻辑已注释说明）。

（三）清除绘制内容

在地图上双击鼠标左键，即可清除所有绘制的覆盖物，包括轨迹线和标记点，并将相关的对象变量（polyline、mk和lastPoint）清空，重新加载页面（这里的重新加载页面逻辑可能需要根据实际需求进一步优化，例如是否真的需要重新加载整个页面，或者只是重置地图状态）。

map.addEventListener('dblclick', function (e) {
    map.clearOverlays();
    polyline = null;
    mk = null;
    lastPoint = null;
});

四、注意事项

1. 确保百度地图 API 的密钥正确配置，否则地图可能无法正常显示或功能受限。
2. 在使用过程中，如果出现地图加载缓慢或绘制不流畅的情况，可能与网络状况或电脑性能有关，可以尝试优化网络环境或减少地图上同时存在的其他元素。
3. 本工具的代码逻辑中，部分操作可能存在一定的优化空间，例如在mousedown事件中对起点的处理以及dblclick事件中对页面重新加载的处理，使用者可以根据实际需求进行进一步的调整和完善。
4. 如果对工具的功能有进一步的扩展需求，例如保存绘制的轨迹线数据、与后端服务器进行交互等，需要对代码进行相应的修改和扩展，建议在修改前备份原始代码，以防止出现问题时能够快速恢复。

通过以上使用说明，用户可以方便地在百度地图上绘制轨迹线，并获取轨迹线的经纬度信息，满足一些基本的轨迹绘制和数据采集需求。

---

@漏刻有时