标记未在传单地图上显示-树枝位置数组到传单地图

编程问答 2022-06-08

问题描述

我在这里有一个带有我的树枝/ javascript的模板-我在通过javascript函数传递“位置”时遇到问题，该函数从数组中获取纬度和经度坐标，并将其传递来显示地图标记）在当前未显示在地图上。

现在，我没有任何错误，并且可以通过Twig正确提取坐标，并且可以通过

将其正确记录到控制台中 在定义location变量后，在我的脚本中

console.log(locations)：

var locations = {{ coords|json_encode|raw }};

在控制台中输出为

> {lat: "50.41830281867368",lng: "-104.51004534959793"}
    lat: "50.41830281867368"
    lng: "-104.51004534959793"
    > __proto__: Object

，并且在使用时还会显示正确的坐标

{{ dump(coords) }}

我当前的全部代码（HTML / Twig和脚本）如下：

  <body>
    {% include '_includes/nav' %}
    <div>
      {% block content %}

      {% endblock %}
      <div class="map-test">
        {% set entries = craft.entries().section('showHomes').all() %}
        {% set coords = {} %}
        {% for post in entries %}
          {% for coord in post.lotInfo %}
            {% if coord.createNewEntry == '1' %}
              {% set coords =
                coords|merge({
                  lat: coord.latitude,lng: coord.longitude
                })
              %}
            {% endif %}
          {% endfor %}
        {% endfor %}
      </div>
    </div>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
      integrity="sha512QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
      crossorigin=""></script>
    <script>
      var map = L.map('map',{ scrollWheelZoom: false }).setView( [50.4205,-104.52],15,)
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
      maxZoom: 19,minZoom: 14.5 }).addTo(map)

      var locations = {{ coords|json_encode|raw }};

      function addToMap(locationArray) { 
        [].forEach.call(locationArray,function(location) { 
          var marker = L.marker([{lat:locations.lat,lng:locations.lng}]).addTo(map); 
          }); 
        }
      addToMap(locations); 
      console.log(locations);
    </script>
  </body>

因此，基本上一切似乎都在工作-没有错误，并且在登录时在控制台中输出了坐标，只是我的javascript函数似乎没有在地图上添加标记，这使我认为问题出在某处具有该功能及其解释能力

var marker = L.marker([locations.lat,locations.lng]).addTo(map);

我也在变量标记上尝试了这种变体：

var marker = L.marker([{lat:locations.lat,lng:locations.lng}]).addTo(map);

感谢任何想法或建议，谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

arraysarraysarrayscraftcmsjavascriptleaflettwigtwig