使用百度地图api开发便民工具

​

项目前提前准备

1. 开发工具vscode+通义灵码插件
2. 百度地图开发者平台实名注册 lbsyun.baidu.com/
3. 百度地图开发者平台创建ak

​编辑

     4.通义灵码上面创建一个百度地图的MCP ,相应的方法可参考如下链接

lbs.baidu.com/faq/api?tit…

项目介绍

开发一款便民工具，用户通过当前位置可快速查询周边常用设施（如便利店、药店、公厕、充电桩），并提供一键导航功能。

功能特性

自动定位

   - 打开页面后，自动获取用户当前位置（需用户授权）

   - 在地图上标记"我的位置"

​编辑

分类查询

   - 提供4个高频便民分类按钮：

     - 便利店

     - 药店

     - 公厕

     - 充电桩

   - 点击后显示周边500米内的对应设施

​编辑

列表+地图联动

   - 左侧显示查询结果列表（含名称、距离、地址）

   - 右侧地图同步标记所有点位

   - 点击列表项，地图视角跳转至对应标记

​编辑

一键导航

   - 点击列表项或地图标记，弹出"导航"按钮

   - 调用百度地图APP或网页版导航

​编辑

技术实现

前端技术栈

• HTML5

• CSS3

• JavaScript (ES6+)

• 百度地图API

主要文件结构

├── index.html          # 主页面

├── style.css           # 样式文件

├── script.js           # 主要逻辑文件

└── README.md           # 说明文档

配置说明

百度地图API密钥配置

要使地图功能正常工作，您需要申请百度地图API密钥：

1. 访问 百度地图开放平台

2. 注册并登录账号

3. 创建应用并获取API密钥

4. 替换代码中的 YOUR_BAIDU_MAP_API_KEY 为您的实际密钥

需要修改的文件位置：

• index.html 第47行和第48行

• script.js 第9行

<!-- 在index.html中 -->

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的实际密钥"></script>

// 在script.js中

const script = document.createElement('script');

script.src='https://api.map.baidu.com/api?v=3.0&ak=实际密钥&callback=initMapCallback';

使用方法

1. 在支持地理位置服务的现代浏览器中打开 index.html

2. 授权浏览器获取您的位置信息

3. 等待地图加载和定位完成

4. 点击任一设施分类按钮进行查询

5. 查看左侧列表结果和右侧地图标记

6. 点击列表项或地图标记查看详情

7. 点击"导航到这里"按钮启动导航

注意事项

1. 浏览器必须支持地理位置API

2. 需要网络连接以加载百度地图API

3. 需要用户授权获取地理位置信息

4. 在实际部署时，请务必替换为有效的百度地图API密钥

功能扩展建议

1. 增加更多设施分类

2. 添加搜索框支持自定义关键词搜索

3. 实现更精确的距离计算和排序

4. 添加收藏功能

5. 支持多语言切换

6. 增加夜间模式

7. 实现离线缓存功能

​