leaflet.js标记未显示

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

在此处输入图片说明

问题是您的位置正在输出为问号而不是数字。 您可以通过简单地查看页面的源代码或使用调试扩展来发现此问题。

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

Answer 2

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

leaflet.js标记未显示

问题描述

2 个解决方案

解决方案1
0 2015-04-30 17:22:07

解决方案2
0 已采纳 2015-04-30 17:58:19

leaflet.js标记未显示

问题描述

2 个解决方案

解决方案1 0 2015-04-30 17:22:07

解决方案2 0 已采纳 2015-04-30 17:58:19

解决方案1
0 2015-04-30 17:22:07

解决方案2
0 已采纳 2015-04-30 17:58:19