单击后移动至标记

点击生成的表单之后，会在地图上自动的移动到改运动锻炼的位置

如何实现

实现这个我们肯定需要点击事件，但是我们需要去选取一个监听的类，我们使用事件委托的方式来创建这个点击事件；

实际代码

创建点击事件

containerWorkouts.addEventListener('click', this._moveToPopup.bind(this));

之后我们来实现moveToPopup这个方法

_moveToPopup(e) {// 防止用户在地图加载之前点击if (!this.#map) return; //如果地图没有加载，简单返回//获取与事件目标最近的具有 .workout 类名的父元素。const workoutEl = e.target.closest('.workout');if (!workoutEl) return;const workout = this.#workouts.find(work => work.id === workoutEl.dataset.id);//指定视图到指定的坐标，并且设定相应的动画this.#map.setView(workout.coords, this.#mapZoomLevel, {animate: true,pan: {duration: 1,},});}

修改之前的代码

mapZoomLevel：

之前的地图缩放是简单的指定大小，修改一下

  #mapZoomLevel = 13;this.#map = L.map('map').setView(coords, this.#mapZoomLevel);

END

现在，我们刷新后，之前创建的运动内容会被清楚，在下篇文章中，我们将实现将运动持久的保存在地图之后，以便记录一下我们的运动历史，当然这也是这个小DEMO的最后一步了！