【问题标题】:Add Leaflet markers from two different AJAX requests从两个不同的 AJAX 请求添加传单标记
【发布时间】:2015-05-18 09:23:07
【问题描述】:

我有两个从 2 个 AJAX 调用中获取的不同 JSON 响应。第一个将数据正确绘制到传单地图。但是,第二个不起作用。

<script type="text/javascript">
        $(document).ready(function () {
      var map = L.map('map').setView([22.6059596, 88.4277967], 13);

      L.tileLayer('http://api.tiles.mapbox.com/v4/abhishekdepro.li9a02j1/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWJoaXNoZWtkZXBybyIsImEiOiI3ZXg1UzlFIn0.d584w0ILalmPRzbJwgxdTw#4', {
          attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
          maxZoom: 18
      }).addTo(map);
      if (localStorage.getItem("user_contact") === null) {

      } else {
          document.getElementById("user").innerHTML = "Hello, " + localStorage.getItem("user_contact");
          document.getElementById("_login").innerHTML = "Logout";
      }
      //var marker = L.marker([51.5, -0.09]).addTo(map);
      //marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

      $.ajax({
          type: 'GET',
          dataType: 'json',
          url: 'https://bloodplus.herokuapp.com/geopoints',
          success: function (data) {
              var obj = data;
              var totalLocations = obj.length;

              var array = [];
              var greenIcon = L.icon({
                  iconUrl: '/images/icon.png',

              });
              array = obj.bloods;
              //alert(array.length);

              for (var i = 0; i < array.length; i++) {

                  marker = new L.marker([parseFloat(array[i].tweet.lat), parseFloat(array[i].tweet.lon)], {
                      icon: greenIcon
                  })
                      .bindPopup(array[i].tweet.group + ', Contact: ' + array[i].tweet.contact).addTo(map);



              }
              another();
          }
      });

  });

  function another() {
      $.ajax({
          type: 'GET',
          dataType: 'json',
          url: 'https://bloodplus.herokuapp.com/geopoints',
          success: function (data) {
              var obj = data;
              var totalLocations = obj.length;
              //document.getElementById('name').value = parseFloat(obj.bloods[0].tweet.lat);

              var array = [];
              var greenIcon = L.icon({
                  iconUrl: '/images/icon.png',

              });
              array = obj.bloods;
              //alert(array.length);

              for (var i = 0; i < array.length; i++) {

                  marker = new L.marker([parseFloat(array[i].tweet.lat), parseFloat(array[i].tweet.lon)], {
                      icon: greenIcon
                  })
                      .bindPopup(array[i].tweet.group + ', Contact: ' + array[i].tweet.contact).addTo(map);



              }
          }
      });


  }
</script>   

但是当我在此之后发出另一个 AJAX 请求时。标记未加载,我收到错误消息:

TypeError: undefined is not a function (evalating 't.addLayer(this)')

【问题讨论】:

  • 似乎没有提供足够的信息来处理。 TypeError 是尝试从 undefined 中访问某些内容时的常见错误。您显示在顶部的代码是第二个 ajax 吗?哪一行给你类型错误?
  • 我已经更新了整个代码。
  • another 函数位于定义 map 的函数之外。将another 移动到顶部函数内。

标签: javascript jquery ajax leaflet


【解决方案1】:

您需要使用new L.MarkerL.marker,而不是两者的组合 - new L.marker。请参阅http://leafletjs.com/reference.html#class 中的类工厂部分。

【讨论】:

  • 我已经换掉了。现在,错误在这一行:
  • marker = L.marker([parseFloat(array[i].lat),parseFloat(array[i].lon)],{icon: greenIcon}) .bindPopup(array[i].group+', Contact: '+array[i].contact).addTo(map);@snkashis
  • iconUrl: '/images/icon.png' 后面有一个逗号需要删除,还有一些其他语法错误 - 检查函数末尾的 } 数量。
  • 修复了所有问题。同样的错误。这是固定代码:$.ajax({ type: 'GET', dataType: 'json', url: 'https://bloodplus.herokuapp.com/userpoints', success:function(data){ var obj = data; var totalLocations = obj.length; var array = []; array = obj.users; for (var i = 0; i &lt; array.length; i++) { marker = L.marker([parseFloat(array[i].lat),parseFloat(array[i].lon)]) .bindPopup(array[i].group+', Contact: '+array[i].contact).addTo(map); } } });
  • 'undefined' 不是对象(评估 't.addLayer')
猜你喜欢
  • 2013-01-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-19
  • 1970-01-01
相关资源
最近更新 更多