Question

我的代码并未在传单地图上一直显示标记。我的代码如下。代码下面是我得到的“查看源代码”。正如您所见，标记是在我的代码中使用位置创建的，但只是不在地图上显示。有什么想法吗？

我的网站在这里，如果您查看来源，您可以看到我们正在尝试制作标记。 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

enter image description here

问题是您的位置是作为问号而不是数字输出的。您只需查看页面的源代码或使用debug extensions即可找到此问题。

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

Answer 2

在第二个弹出窗口绑定中关闭H3标记的"后，您遗漏了popupText+。见"<h3>"+popupText+</h3>"

leaflet.js标记没有显示出来

2 个答案: