当前位置：首页 > news >正文

北京建设信源资讯有限公司网站宁波谷歌seo

news 2025/7/7 23:12:33

北京建设信源资讯有限公司网站,宁波谷歌seo,烟台建设科技网站,建设网站利用点击量赚钱前言上篇文章为大家展现了好看的信息窗口，接下来我们跟着流程图看下一步之前我们的带点击事件已经添加完毕，下一步就是当用户点击的时候，渲染锻炼形式，当然这是一个标签，可以提供给用户输入锻炼形式实例 ● 我…

前言

上篇文章为大家展现了好看的信息窗口，接下来我们跟着流程图看下一步
在这里插入图片描述

之前我们的带点击事件已经添加完毕，下一步就是当用户点击的时候，渲染锻炼形式，当然这是一个标签，可以提供给用户输入锻炼形式

实例

● 我们的表单在HTML中已经写好了，其实这个表单有一个隐藏类
在这里插入图片描述

● 当我们去除这个隐藏类的时候，我们就可以让表单展现出来，当然这个表单的类名已经在js存储到变量中，我们可以直接去使用

map.on('click', function (mapEvent) {form.classList.remove('hidden');map.on('click', function (mapEvent) {form.classList.remove('hidden');// const { lat, lng } = mapEvent.latlng;// L.marker([lat, lng])//   .addTo(map)//   .bindPopup(//     L.popup({//       maxWidth: 250,//       minWidth: 100,//       autoClose: false,//       closeOnClick: false,//       className: 'running-popup',//     })//   )//   .setPopupContent('跑步')//   .openPopup();});},});},

在这里插入图片描述

● 让我们刚开始点击的时候，光标就锁定在锻炼距离上，这样会提升用户体验

inputDistance.focus();

在这里插入图片描述

● 当表单生成并且填写完毕后，我们回车就会将标记渲染到地图上，很明显，这就要使用监听事件了

form.addEventListener('submit', function () {//展现标记const { lat, lng } = mapEvent.latlng;L.marker([lat, lng]).addTo(map).bindPopup(L.popup({maxWidth: 250,minWidth: 100,autoClose: false,closeOnClick: false,className: 'running-popup',})).setPopupContent('跑步').openPopup();
});

但是，我们发现这里的map，和mapEvent好像无法访问到，因为这个是在另一个函数内部的，所以我们需要在全局上进行宣告；宣告完成后，不要忘记修改函数中的变量声明；

let map, mapEvent;
if (navigator.geolocation)navigator.geolocation.getCurrentPosition(function (position) {const { latitude } = position.coords;const { longitude } = position.coords;const coords = [latitude, longitude];map = L.map('map').setView(coords, 13); //去除const声明L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(map);map.on('click', function (mapE) {  //这个的Event需要修改mapEvent = mapE; //将这里的变量赋予到全局去form.classList.remove('hidden');inputDistance.focus();});},function () {alert('无法获取你的位置！');});

● 但是这样并不会生效哦，不要忘记，表单的默认行为提交后会刷新网页；所以我们要阻止表单的默认行为；

form.addEventListener('submit', function (e) {e.preventDefault(); //组织表单默认行为//展现标记const { lat, lng } = mapEvent.latlng;L.marker([lat, lng]).addTo(map).bindPopup(L.popup({maxWidth: 250,minWidth: 100,autoClose: false,closeOnClick: false,className: 'running-popup',})).setPopupContent('跑步').openPopup();
});

在这里插入图片描述

● 这个标签在输入提交之后并不会清楚里面的内容，所以我们使用我们之前经常使用方式，当表格提交后，清理输入选项；

form.addEventListener('submit', function (e) {e.preventDefault(); //组织表单默认行为//将表格输入内容置空inputDistance.value =inputDuration.value =inputCadence.value =inputElevation.value ='';//展现标记const { lat, lng } = mapEvent.latlng;L.marker([lat, lng]).addTo(map).bindPopup(L.popup({maxWidth: 250,minWidth: 100,autoClose: false,closeOnClick: false,className: 'running-popup',})).setPopupContent('跑步').openPopup();
});

● 下面，当表单输入为骑行的时候将锻炼配置改变为骑行海拔。
● 这样在HTML里面也写好了，同样，这个也是隐藏类
在这里插入图片描述

● 其实这个实现非常的简单，我们只需要在监听事件监听到选择改变的时候，改变一下隐藏类就行了，实际我们只需要确保这两个必须保持有一个有隐藏类

inputType.addEventListener('change', function () {//改变的时候判断是否存在隐藏类，有就去除，没有就添加inputElevation.closest('.form__row').classList.toggle('form__row--hidden'); inputCadence.closest('.form__row').classList.toggle('form__row--hidden');
});