网站建设怎么做分录,H5响应式网站数据,山西网站建设推广,大连网站建设招标单击后移动至标记 点击生成的表单之后#xff0c;会在地图上自动的移动到改运动锻炼的位置 如何实现
实现这个我们肯定需要点击事件#xff0c;但是我们需要去选取一个监听的类#xff0c;我们使用事件委托的方式来创建这个点击事件#xff1b;
实际代码
创建点击事件
…单击后移动至标记 点击生成的表单之后会在地图上自动的移动到改运动锻炼的位置 如何实现
实现这个我们肯定需要点击事件但是我们需要去选取一个监听的类我们使用事件委托的方式来创建这个点击事件
实际代码
创建点击事件
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的最后一步了
