前言

我们可千万不能忘记我们之前花的流程图哦，我们所有的计划都按照我们的流程图来去构建；

我们已经完成了，页面的加载，也已经完成获取用户当前的位置坐标，并且我们通过地图的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('无法获取你的位置！');
    }
  );