网站建设受众,wordpress保存帖子数据库,wordpress.图片旋转代码,东莞常平嘉华学校前言
上篇文章为大家展现了好看的信息窗口#xff0c;接下来我们跟着流程图看下一步
之前我们的带点击事件已经添加完毕#xff0c;下一步就是当用户点击的时候#xff0c;渲染锻炼形式#xff0c;当然这是一个标签#xff0c;可以提供给用户输入锻炼形式
实例
● 我…前言
上篇文章为大家展现了好看的信息窗口接下来我们跟着流程图看下一步
之前我们的带点击事件已经添加完毕下一步就是当用户点击的时候渲染锻炼形式当然这是一个标签可以提供给用户输入锻炼形式
实例
● 我们的表单在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 hrefhttps://www.openstreetmap.org/copyrightOpenStreetMap/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);
});这还没有写多少的功能我们似乎发现我们的代码已经非常的乱了下篇文章我们需要提前考虑一下我们的项目架构以便我们可以更换的规划我们的代码使得代码的管理更加的好
