javascript - 添加来自两个不同 AJAX 请求的 Leaflet 标记

Question

我有两个不同的 JSON 响应，它们是从 2 个 AJAX 调用中获取的。第一个将数据正确地绘制到 Leaflet Map 中。但是，第二个不起作用。

<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 (evaluating 't.addLayer(this)')

Answer 1

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