JavaScript使用leaflet库显示信息窗口

前言

我们可千万不能忘记我们之前花的流程图哦，我们所有的计划都按照我们的流程图来去构建；
在这里插入图片描述

我们已经完成了，页面的加载，也已经完成获取用户当前的位置坐标，并且我们通过地图的API将当前的位置在地图中渲染出来，接着我们就要去做，当用户点击地图的时候，去形成一个标记
在这里插入图片描述

if (navigator.geolocation)navigator.geolocation.getCurrentPosition(function (position) {const { latitude } = position.coords;const { longitude } = position.coords;const coords = [latitude, longitude];const map = L.map('map').setView(coords, 13);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 (mapEvent) {const { lat, lng } = mapEvent.latlng;L.marker([lat, lng]).addTo(map)  //将标记事件绑定到map上.bindPopup(  //绑定弹出信息窗口L.popup({maxWidth: 250,  //设置窗口最大宽度minWidth: 100,//设置窗口最小宽度autoClose: false,  //当出现第二个窗口是，第一个不会被关闭closeOnClick: false,  //弹窗不默认关闭className: 'running-popup',  //给弹窗自定义CSS})).setPopupContent('跑步')  //设置弹窗内容.openPopup();});},function () {alert('无法获取你的位置！');});