足迹地图

足迹

“我走遍天涯海角,收获了不平凡的人生”。

前两天百度地图提醒我已经走过全国27个省份、157个城市。

于是突然想做个地图来纪念这些年来的漂泊。

探索了几种方案,也在GitHub上看了不少实现的代码,最终选择用百度地图API来实现。下面是开发文档:

功能

  1. 在地图上显示多个城市的标记,并提供相关信息展示功能。
  2. 点击标记时,显示你想要展示的信息。

实现方法

1. 获取百度地图开发者密钥

在开始之前,您需要获取百度地图开发者密钥。请按照以下步骤进行:

  1. 访问百度地图开放平台(http://lbsyun.baidu.com/)。
  2. 注册并登录您的开发者账号。
  3. 创建一个应用,并获取开发者密钥。(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. 其他功能

根据您的项目需求,您可以进一步实现其他功能,例如:

请参考百度地图 API 文档以获取更多详细信息和功能示例。

完整代码

GitHub下载完整代码:https://github.com/zkmhy2023/footprint

本文链接:

https://ai1223.com/archives/7/
1 + 2 =
快来做第一个评论的人吧~