leaflet.js 标记未显示

Question

我的代码并非始终在传单地图上显示标记。我的代码如下。代码下方是我得到的 "view source" 。如您所见，标记是使用我的代码中的位置创建的，但只是不显示在地图上。有什么想法吗？

我的网站在这里，如果您查看源代码，您可以看到我们正在尝试制作标记。 https://pursuer.herokuapp.com/maps/

{% load leaflet_tags %}

<head>

    {% leaflet_js %}
    {% leaflet_css %}

    <style>

    .leaflet-container {  /* all maps */
        width:  600px;
        height: 400px;
    }

    #yourmap {
        width:  1600px;
        height: 700px;
    }
    #sidebar{
        float: right;
        }

</style>

</head>

<body>
<div id="sidebar">
        {% block sidebar %}
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/register">Register</a></li>
            <li><a href="/accounts/login/">Login</a></li>
            <li><a href="/setup/">Setup Your Device</a></li>
        </ul>
        {% endblock %}
    </div>
{% if user.is_authenticated %}
    <p>Welcome, {{ user.username }}. Thanks for logging in.</p>
{% else %}
    <p>Welcome, new user. Please log in.</p>
{% endif %}
{% if latest_device_list %} 

 <script type="text/javascript">
var userArray = new Array();
  function map_init_basic (yourmap, options) {
   var marker = null;

  // map.setView([26.2406685,-80.1665045], 12);
 //map.locate({setView:true, maxZoom: 8});
     {% for device in latest_device_list %}


             var popupText = null;
            {% if user_imei.User_Alias %} 
                popupText='{{user_imei.User_Alias}}';

            {% else %} 

                popupText = {{device.Device_IMEI}};
             {% endif %}
                marker = new L.marker([{{device.Device_Lat}}, {{device.Device_Lon}}])
                .bindPopup("<h3>"+popupText+"</h3>")
                .addTo(yourmap);
                user = {{device.Device_IMEI}};
                userArray[user] = marker;


    {% endfor %} 
     }
    function update_position()
    {

    {% for device in latest_device_list %}

      var popupText = null;


                popupText = {{device.Device_IMEI}};

        userArray[{{device.Device_IMEI}}].setLatLng(new L.LatLng([{{device.Device_Lat}}, {{device.Device_Lon}}]))
        .bindPopup("<h3>"+popupText+</h3>")
        .update();

     {% endfor %} 
      // pan to last device location
     yourmap.panTo(new L.LatLng(marker.getLatLng()),yourmap.getZoom());
    window.setTimeout(update_position,50);
    }
     update_position();
    </script>

     {% else %}
    <p>No Devices are available.</p>
    {% endif %}
  {% leaflet_map "yourmap" callback="window.map_init_basic" %}   

</body>

Answer 1

问题是您的位置被输出为问号而不是数字。您只需查看页面的源代码或使用 debug extensions.

即可发现此问题

问题出在服务器级别，而不是 Leaflet。

Answer 2

您在第二个弹出窗口绑定中的结束 H3 标记的 popupText+ 之后缺少 "。参见 "<h3>"+popupText+</h3>"

leaflet.js 标记未显示

leaflet.js markers not showing up

javascript

python-3.x

leaflet