Leaflet 当我允许跟踪我的位置时，尝试在我的确切位置显示自定义标记_Leaflet

Leaflet 当我允许跟踪我的位置时，尝试在我的确切位置显示自定义标记

leaflet

Leaflet 当我允许跟踪我的位置时，尝试在我的确切位置显示自定义标记,leaflet,Leaflet,当我接受询问位置的提示时，我想在我的位置上使用picuserPosition.png，现在它不起作用 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcB

当我接受询问位置的提示时，我想在我的位置上使用pic

userPosition.png

，现在它不起作用

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
    <script src="./leaflet/leaflet.js"></script>
    <style></style>
  </head>

  <body>
    <h2 style="text-align: center;">My interactive map</h2>

    <div id="mapid" style="width: 100%;height: 500px;"></div>

    <script>
      var mymap;
      mymap = L.map("mapid").setView([55.70584, 13.19021], 12);

      L.tileLayer(
        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFkc2pvaGFuc2VuIiwiYSI6ImNrNWkxZnA3bzA5NnIza3M2cGczNnprMHcifQ.Z2h9R1lODB6zPZ2Ex92BrA",
        {
          attribution:
            'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          maxZoom: 18,
          id: "mapbox/streets-v11",
          accessToken: "your.mapbox.access.token"
        }
      ).addTo(mymap);

      function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng)
          .addTo(map)
          .bindPopup("You are within " + radius + " meters from this point")
          .openPopup();
      }

      function onLocationError(e) {
        alert(e.message);
      }

      map.on("locationfound", onLocationFound);
      map.on("locationerror", onLocationError);

      map.locate({
        setView: true,
        maxZoom: 16
      });

      var popup = L.popup();
      var marker = L.marker();
      var circle = L.circle();

      var newMarkerIcon = L.Icon.extend({
        options: {
          iconSize: [38, 95],
          shadowSize: [50, 64],
          iconAnchor: [22, 94],
          shadowAnchor: [4, 62],
          popupAnchor: [-3, -76]
        }
      });

      var blackMarker = new newMarkerIcon({ iconUrl: "userPosition.png" });

      function onMapClick(e) {
        L.marker(e.latlng, "Insert postition PNG pic here")
          .addTo(mymap)
          .bindPopup("You clicked the map at " + e.latlng.toString());
      }

      mymap.on("click", onMapClick);
    </script>
  </body>
</html>


我的互动地图
var-mymap；
mymap=L.map（“mapid”）.setView（[55.70584,13.19021]，12）；
蒂莱耶(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoibwfkc2pvagfuc2vuiiwiysi6imnwkxzna3bza5nniza3m2cgcznprmhcifq.Z2h9R1lODB6zPZ2Ex92BrA“，
{
归属：
“地图数据©；贡献者，图像©”，
maxZoom:18，
id:“地图盒/街道-v11”，
accessToken:“您的.mapbox.access.token”
}
).addTo（mymap）；
函数onLocationFound（e）{
var半径=e.精度/2；
L.标记器（如板条）
.addTo（地图）
.bindPopup（“您在距离该点“+半径+”米以内”）
.openPopup（）；
}
函数onLocationError（e）{
警报（e.message）；
}
地图上（“locationfound”，onLocationFound）；
map.on（“locationerror”，onLocationError）；
定位({
setView：对，
最大缩放：16
});
var popup=L.popup（）；
var marker=L.marker（）；
变量圆=L.圆（）；
var newMarkerIcon=L.Icon.extend({
选项：{
iconSize:[38,95]，
阴影大小：[50,64]，
iconAnchor:[22,94]，
暗影主播：[4,62]，
popupAnchor:[-3，-76]
}
});
var blackMarker=newnewmarkericon（{iconUrl:“userPosition.png”}）；
函数onMapClick（e）{
L.标记（如“此处插入位置PNG图片”）
.addTo（mymap）
.bindPopup（“您在“+e.latlng.toString（）处单击了地图”）；
}
mymap.on（“单击”，onmaclick）；

使用以下方法：

L.marker([e.latlng], { icon: YourIconHere })
        .bindPopup("You are within " + radius + " meters from this point")
        .openPopup()
        .addTo(map);

您也可以像这样添加圆：

L.circle([e.latlng], radius,
      { weight: 1, color: 'blue', fillColor: '#cacaca', fillOpacity: 0.2 })
      .addTo(map);

是否执行了

onLocationFound（）

？（调试，调试，调试）。注意你定义的是

blackMarker

但你没有在任何地方使用它。好的，谢谢，我来看看这个！