Leaflet throw" Uncaught TypeError:无法读取属性' lat'未定义"将新标记添加到地图

时间:2017-10-19 00:12:01

标签: javascript leaflet

我试图循环查看ajax调用的结果,以便在点击时为传感器创建标记。现在,我只想在单击按钮时显示标记。这不起作用。调试之后,它可能是时序/并发问题的问题,但之前的类似问题使用window.SetTimeOut()解决了它。这不适合我。我在下面提供了此代码以及错误消息的屏幕截图:

传单的屏幕截图,其中latlng对象为空

enter image description here

控制台错误的屏幕截图

enter image description here

这是我的代码

function sensorLayer(response) {
  response.forEach(function(item) {
    if (item["Latitude"] !== null && item["Longitude"] !== null) {
      window.setTimeout(() => {
        var mark = new L.marker((parseFloat(item["Latitude"]), parseFloat(item["Longitude"])))
          .addTo(map);
      }, 100);
    }
  });
}

这是电话:

document.getElementById("sensorSwitch").addEventListener("click", function(){  $.ajax({  
url: ' ',//I deleted this
data: {
  db: ' ',
  q: "SELECT MEAN(\"pm2.5 (ug/m^3)\") from airQuality where time >='2017-09-06T00:00:00Z'"
},
success: function (response){
  console.log(response);  });  

任何帮助表示赞赏!它不会让我添加更多的2个链接,否则我会包含一个我得到的数据的例子(我认为,分享是不关心的。)

2 个答案:

答案 0 :(得分:1)

问题可能是因为传递了一个数组,而不是在接收器函数中再次为坐标访问添加了一个括号。 例如,您有一个函数接受一个对象,该对象具有一个包含 lat 和 lng 坐标的数组 当您调用此函数并将其传递给具有坐标的对象并在使用数组括号访问它的函数内部时会导致此问题 只需从数组坐标中删除 []

_renderWorkoutMarker(workout) {
    L.marker(workout.coords)
      .addTo(this.#map)
      .bindPopup(
        L.popup({
          maxWidth: 250,
          minWidth: 100,
          autoClose: false,
          closeOnClick: false,
          className: `${workout.type}-popup`,
        })
      )
      .setPopupContent('workout')
      .openPopup();
  }

在上面的代码中我错误地添加了像L.marker([workout.coords])这样的括号,但实际的代码是L.marker(workout.coords) 谢谢

答案 1 :(得分:0)

您可能希望使用坐标实例化L.latLng,或将它们作为数组传递,而不是使用正常括号(lat, lng)包裹2个坐标:

var mark = L.marker(
  L.latLng(
    parseFloat(item["Latitude"]),
    parseFloat(item["Longitude"])
  )
);

或:

var mark = L.marker([
  parseFloat(item["Latitude"]),
  parseFloat(item["Longitude"])
]);
顺便说一下,你绝对应该避免使用源自客户端代码的SQL查询。这是代码注入的经典安全漏洞。