足迹地图
“我走遍天涯海角，收获了不平凡的人生”。
前两天百度地图提醒我已经走过全国27个省份、157个城市。
于是突然想做个地图来纪念这些年来的漂泊。
探索了几种方案，也在GitHub上看了不少实现的代码，最终选择用百度地图API来实现。下面是开发文档：
功能
- 在地图上显示多个城市的标记，并提供相关信息展示功能。
- 点击标记时，显示你想要展示的信息。
实现方法
1. 获取百度地图开发者密钥
在开始之前，您需要获取百度地图开发者密钥。请按照以下步骤进行：
- 访问百度地图开放平台（http://lbsyun.baidu.com/）。
- 注册并登录您的开发者账号。
- 创建一个应用，并获取开发者密钥。（Referer白名单一定要把你的域名和IP地址都写上，只写域名经常无法生效）
2. 引入百度地图 API
在 HTML 文件中引入百度地图 API，以便在项目中使用地图功能。您可以按照以下示例代码将地图 API 引入到您的项目中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>足迹地图</title> <script src="https://api.map.baidu.com/api?v=2.0&ak=your-app-key"></script> </head> <body> <!-- 在这里放置地图容器 --> </body> </html>请将 your-app-key 替换为您在第一步中获取到的开发者密钥。
3. 显示地图
在 JavaScript 中，使用百度地图 API 创建地图实例并在页面中显示地图：
javascriptCopy code
// 创建地图实例
var map = new BMap.Map("map"); // "map"是地图容器的id
// 设置地图中心点和缩放级别
var point = new BMap.Point(113.6401, 34.72468); // 设置地图中心点坐标
map.centerAndZoom(point, 5); // 设置地图中心和缩放级别4. 添加标记
在地图上添加城市标记，并实现点击标记显示相关信息的功能：
javascriptCopy code
var locations = [
{ city: "无锡市", text: "无锡市，2023年6月18日点亮" },
{ city: "常州市", text: "常州市，2023年6月16日点亮" },
{ city: "岳阳市", text: "岳阳市，2023年5月30日点亮" },// 设置地图样式
map.setMapStyle({ styleJson: styleJson });
// 添加缩放控件
map.addControl(new BMap.NavigationControl());// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);// 循环遍历城市数组
for (var i = 0; i < locations.length; i++) {
// 创建闭包来保存城市名称和文本信息
(function () {
var city = locations[i].city;
var text = locations[i].text;// 使用地理编码将城市名称转换为经纬度
var geoc = new BMap.Geocoder();
geoc.getPoint(city, function (point) {
if (point) {
// 添加标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);// 创建信息窗口
var infoWindow = new BMap.InfoWindow(text, { enableMessage: true });
// 绑定点击事件
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);5. 数组信息获取
百度地图APP足迹页面点亮城市列表截图+OCR识别
6. 其他功能
根据您的项目需求，您可以进一步实现其他功能，例如：
- 自定义标记样式
- 自定义地图样式，更换JSON代码即可，参考百度开发文档：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom
- 数据可视化展示
- ...
请参考百度地图 API 文档以获取更多详细信息和功能示例。
完整代码
版权申明
本文系作者 @Zkmhy. 原创发布在Zkmhy's blog站点。未经许可，禁止转载。
暂无评论数据