低仿翁天信 camarts 旅行足迹地图源码

效果图。

一、地图初始化部分

1. 引入百度地图 API：通过<script>标签引入百度地图的 API 脚本，这是使用百度地图相关功能的基础，确保能正常调用百度地图的各类接口和对象。
2. 【自己注册一个百度的API 注册地址：控制台 | 百度地图开放平台】
3. 
4. 记得要修改成自己申请的。
5. 创建地图实例并设置基本属性：
   • 使用new BMapGL.Map("map")创建一个地图实例，并挂载到页面中id为map的div元素上。
   • 设置了初始的中心点坐标为大致中国中心位置（经度108，纬度34），并设置了一个初始的缩放级别5，当然这个缩放级别和中心点都可以根据实际想要展示的效果进行调整优化，使其一开始就能较好地展示包含所有足迹位置的地图范围。
   • 启用了鼠标滚轮缩放功能，方便用户对地图进行缩放操作查看不同细节程度的地图内容。

二、足迹标记添加部分

1. 定义足迹位置数据：创建了一个名为markersData的数组，里面的每个元素都是一个对象，对象包含了足迹位置的经纬度信息（格式与原代码中对应，但注意经纬度顺序在百度地图里是先经度后纬度）以及对应的城市名称，这和原jVectorMap库中配置足迹标记的数据结构类似，便于后续遍历添加标记操作。
2. 遍历添加标记及交互逻辑：
   • 使用forEach方法遍历markersData数组，对于每个元素：
   • 根据经纬度信息创建对应的BMapGL.Point坐标点对象，然后通过new BMapGL.Marker基于该坐标点创建一个标记，并添加到地图上（map.addOverlay(marker)），这样就在地图上展示出了相应的足迹位置标记。
   • 为每个标记添加点击事件监听，当点击标记时，创建一个BMapGL.InfoWindow信息窗口，窗口内容为对应的城市名称，然后通过map.openInfoWindow(infoWindow, point)在点击的标记位置弹出显示城市名称的信息窗口，实现了类似原代码中点击标记查看对应地点信息的交互效果。